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 trialorange sky
Front End Web Development Techdegree Student 4,945 Pointsproblem 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>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
2 Answers
Dylan Harris
8,969 PointsTry giving .main-header {height:auto;} in addition to the padding to prevent collapse. Not sure about original code.
orange sky
Front End Web Development Techdegree Student 4,945 PointsI 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
Guillaume St-Denis
15,555 PointsGuillaume St-Denis
15,555 PointsHi 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!