Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Ben Brenton
Ben Brenton
266 Points
Posted by Ben Brenton
Ben Brenton
266 Points

Shrinking page size - footer elements don't float like other elements?

I have followed the mentioned video regarding floating elements in the body. My problem is I have a footer which has social media links (Facebook/Twitter icons/links) and they are not behaving with the other elements, however on the video they seem to when scaling down to mobile-friendly version. Below is my CSS code:

#suits                  {
    margin: 0 40px;
    list-style: none;
} 

#suits li               {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;

And below is the relevant part of my HTML file:

<section>
        <ul id="suits">
            <li><a href="spades.html">
                <img src="" alt="cannot display image">
                <p>Transfer Window Summer 2015</p>
                </a>
            </li>
            <li><a href="hearts.html">
                <img src="" alt="cannot display image">
                <p>Barclays Premier League 2015/2016</p>
                </a>
            </li>
            <li><a href="diamonds.html">
                <img src="" alt="cannot display image">
                <p>Sky Bet Championship 2015/2016</p>
                </a>
            </li>
            <li><a href="clubs.html">
                <img src="" alt="cannot display image">
                <p>Off Topic</p>
                </a>
            </li>
        </ul>
    </section>
    <footer>
        <a href="http://facebook.com/kickit0ff?ref=tn_tnmn"><img src="img/fblog.png" alt="Facebook"></a>    
        <a href="http://twitter.com/ffotikcik"><img src="img/twlog.png" alt="Twitter"></a>
        <p>&copy; 2015 KICK IT OFF</p>
    </footer>

Can anyone help me solve this? Thanks.

3 Answers

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

Hello Ben,

As Yulia Markina said there's no CSS for footer, so you can try the code which she provided.

But as your li's are floated, so make sure to add this also in your footer css :

footer {
    clear: both;
}
Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

That's right, Satnam! I decided to leave it as it is since this property will be covered later in this course.

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

OH, I didn't checked course video, just new here signed up for pro membership 2 days ago, as learning alone is just boring thing, so participating in forums to make some new friends and checking how others are doing.

One more thing Ben, we can also use overflow:hidden; for parent element of the floated elements. Just don't get scared if it's new for you, teamtreehouse having some great courses and keep learning and practicing , and with time you'll understand everything !

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Thumb up for sighing up! :) Totally agree, learning alone is boring. This is a perfect place to learn the best practices and feel as a part of one international team:)

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

Yes, and learning under some great experts of this industry and checking out weekly conferences and workshops with latest technologies is just awesome :) Feels Great ! Are you in teamtreehouse team or a student here and learning ?

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

I'm a student on my second track. Nice to meet you, Satnam!

Ben, I hope we helped you with your question!:)

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

Great, Nice to meet you too, Yulia !

And yes Ben, if you've any questions or issues then you can ask.

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Hey Ben, I don't see any styles for footer in your CSS, it should look like this:

footer {
  text-align: center;
  padding-top: 50px;
  font-size: 0.75em;
  color: #ccc;
}

Hope it helps.

Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

Thank you very much, you were both very helpful. Think you are right and it is something I haven't covered yet. For this issue I used Satnam's approach and just did a "clear" function for now as, at this stage, I have no particular styling I want for my footer, but this will probably change as my project progresses.

Thanks again for the advice, and nice to be part of the team!

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

No worries, just practice, practice and practice and you'll be great going.

Also just to clear you a basic thing, it's not a function, 'clear' is a property and 'both' is a value.

selector {
    property: value;
}
Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

Thank you, Satnam, still trying to get the lingo right!