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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

PUC Treehouse
PUC Treehouse
7,021 Points
Posted by PUC Treehouse
PUC Treehouse
7,021 Points

set background color to the section and appear to all element inside it including the unordered list with float element.

Please kindly check my code here:

https://jsfiddle.net/g8z3afcq/6/

PUC Treehouse
PUC Treehouse
7,021 Points
PUC Treehouse
PUC Treehouse
7,021 Points

Ben Farnham This is what i'm looking for. Thank you so much.

1 Answer

benfarnham
benfarnham
17,073 Points

From what I am guessing, you are wondering why the blue background isn't appearing behind all of your floated elements?

From what I can see, your parent element is collapsing around all of your floated elements (here is a great article on it). To fix it, we can use a 'Micro Clearfix' made by Nicolas Gallagher. Go to your CSS and add this micro clearfix: 

.group:before,
.group:after {
  display: table;
  content: "";
}
.group:after {
  clear: both;
}

Then once you have your clearfix in place, navigate to your HTML and add the 'group' class to the parent element to all of your floated items. 

<ul id="gallery" class="group">

    <!-- All of your floated list items here -->

</ul>

This will keep the parent element from collapsing and and fix your blue background. Hope this answers your question! Best of luck!