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 CSS Layout Techniques Float Layout Floating Columns and Images

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

problem applying after{content: ""; clear:both;} on my main-header

Hello!

I have floated left my logo and main nav list. Now I am trying to fix the main-header(where the main-logo and main-nav li are contained in) so that it is back in the normal document flow. I have applied the .group::after pseudo class, but the main-header is still collapsing. If you run it, you will see the main-header collapsing at the top of the screen as a long black strip spanning accroos the screen. Can you pleease tell me how I can use :after{content "", clear:both} on the main-header to remove the collapse?

2) Where can I go to get the original code for CSS Layout Techniques?

Thanks !!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="normalize.css">
<style>
.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.main-footer { background-color: #b7c0c7;}


 body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}
.main-wrapper{
margin:0 auto;
width:90%;



}

.main-header{
padding:20px;


}
.group::after{
content:" ";

clear:both;




}

.main-logo, .main-nav, .main-nav  li{

border-radius:5px;
float:left;


}

.main-logo a, .main-nav a{
padding:15px 15px;
display:block;
text-align:center;
}
.main-logo{
margin: 0 20px 0 0;


}

.main-nav li{
margin-top:15px;
margin-right:10px;
margin-left:10px;



}


</style>

</head>

<body>
<div class="main-wrapper">
<header class="main-header group"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li>
<li> <a href="#">Link 2</a></li>
<li> <a href="#">Link 3</a></li>
<li> <a href="#">Link 4</a></li>
</ul>

</header>


<div class="primary-content col">
<h2> Primary Content </h2>
<p>deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
</p>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
 </p>
</div>

<div class="secondary-content col">
<h2> Secondary Content </h2>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
</p>
<hr>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77


</p>
</div>


<footer class="main-footer">
<p>&copy; 2014 Example Layout </p>
</footer>

</div>
</body>
</html>
Guillaume St-Denis
Guillaume St-Denis
15,555 Points

Hi Orange Sky!

You code should go like this:

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

So this method uses after pseudo-element to generate empty content via the content property. Then it styles the content by displaying it table. Table creates an anonymous table cell and a new block-formatting context which uses the after pseudo-element to prevent top margins from collapsing.

Cheers!

2 Answers

Dylan Harris
Dylan Harris
8,969 Points
Dylan Harris
Dylan Harris
8,969 Points

Try giving .main-header {height:auto;} in addition to the padding to prevent collapse. Not sure about original code.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

I just tried it, and nope, it didn't work. If it works for you with my code above, can you please copy and paste it. Also, why is height:auto a solution for this problem?

In the video, the instructor says to remove min-height:100px from the .main-header, so I would think any kind of height is not recommened when applying .group:: after{content:""; clear:both;} thanks