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 Image Captions

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
Posted by SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Why does the "float" property inside de gallery affects the footer if it is not part of the gallery ID?

The footer wasn't declared to be a apart of the gallery ID. So it seems strange to me that it is affected by a property declared inside the gallery selector.

4 Answers

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Gabriel I figured it out after. When you float an element you are allowing surrounding content to wrap (or flow) around it in the available space (if there is any), regardless if the surroundings are floated or not.

The way elements are laid out by the browser when elements are floated depends on the size of the elements and the available space, that's why you use margins/padding to manipulate the size of elements to make them render the way you want.

In this case particular case, there is enough space for the footer to wrap around the 3rd image, so it wraps. One way to tell the browser to not allow to flow freely is by clearing the elements you don't want to be influenced by the float (e.g the footer).

Gabriel de Leon
Gabriel de Leon
2,430 Points
Gabriel de Leon
Gabriel de Leon
2,430 Points

Thanks Sergio, great explanation!

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

You can use a "clearfix" on the parent element of your list items to "self-clear" them. Basically, you use a psudo-element to clear the floats. This should fix your problem of having the footer creep up into your floated items.

Here's a good article on how to use clearfix. http://css-tricks.com/snippets/css/clear-fix/

Cheers!

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

Hi Sergio! Can you include the code that you're having trouble with?

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Sure! Thanks in advance for your help!

In the HTML there is an ID item named "gallery" that contains al the elements of an unordered list. However the "gallery" id does not includes the footer. 

          <ul id="gallery">
            <li>
              <a href="img/numbers-01.jpg">   
                  <img src="img/numbers-01.jpg" alt="">
              </a>
            </li>
            <li>
              <a href="img/numbers-02.jpg"> 
                  <img src="img/numbers-02.jpg" alt="">
              </a>
            </li>  
            <li>
              <a href="img/numbers-02.jpg"> 
                  <img src="img/numbers-02.jpg" alt="">
              </a>
            </li>  
        </ul>

      <footer>
        <a href="http://twiter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <p>&copy; 2014 | Sergio Rodriguez</p>
      </footer>

In the CSS file I coded this to make all the elements in the list to appear side by side (2 columns). However, as the number of list items is odd, the footer gets floated next to the third element.

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

To fix this I had to cleat the footer, however I don't understand why the footer is being floated if it is not part of the gallery ID.

footer {
  clear: both;
}