Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Float Layout Floating Columns and Images

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>

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

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

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