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
orange sky
Front End Web Development Techdegree Student 4,945 Pointsclear fix
Hello,
1) Why doesn't my clear fix work in this code, the footer is running below all 3 columns?
2) the columns are 30% each. before running this code, I thought there out be a white margin after the the 3 columns, but they all spread out evenly and are exactly the same width as the main-header. why??
<!DOCTYPE html>
<html>
<head>
<title>Display Modes</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="">
<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: 1.1em/1.5 sans-serif;
color:#222;
}
/* styling main-header */
.main-header{
padding:25px;
}
.main-nav, .main-nav li{
display:inline-block;
}
.main-logo a, .main-nav a{
padding: 5px 20px;
display:block;
text-decoration:none;
color:white;
border-radius:5px;
text-align:center;
}
/* styling using relative position */
.main-logo, .main-nav{
position:relative;
}
.main-logo{
width:150px;
top:20px;
border-radius:5px;
}
.main-nav {
bottom:57px;
left:150px;
}
.main-nav li{
margin-right:10px;
border-radius:5px;
}
/* float the columns */
.col{
padding:20px;
width:30%;
float:left;
}
/*clear fix*/
.group:before, .group:after {
display: table;
content: " ";
}
.group:after {
clear: both;
}
</style>
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
<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>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
<p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
<hr>
<p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
</div>
<div class="extra-content col">
<h3>Secondary Content</h3>
<p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
<hr>
<p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
</div>
<footer class="main-footer group">
<p>©2014 Example Layout</p>
</footer>
</div>
</body>
</html>
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsYou would only apply the clearfix hack to your footer if your footer contained floated children and you wanted to keep it from collapsing.
In this case you need the footer to clear the previously floated columns. You want to apply clear: both to your footer.
footer {
clear:both;
}
This forces your footer down below the columns.
Question 2:
If they were the same width as your header then you must have had your browser at just the right size. You also have 20px padding all around on the columns. This adds to the width. 20px on both sides for all 3 columns adds up to 120 extra pixels plus the 90%.. At smaller browser widths there actually isn't enough room for all 3 columns.
Dave Faliskie
17,793 Pointsto fix the problem with the footer and make it go across the whole bottom you need to set heights to the content divs.
.col{
padding:20px;
width:30%;
float:left;
height: 400px;
}
The reason your footer is not going across the entire page is because your primary content was longer then the other two, and all 3 divs were set to an auto height by default.
hope that helps
orange sky
Front End Web Development Techdegree Student 4,945 Pointsthanks Dave, I gave my container a height .
orange sky
Front End Web Development Techdegree Student 4,945 Pointsorange sky
Front End Web Development Techdegree Student 4,945 PointsHello Jason!! Thanks always for your clear explanations. Are you are a staff member at this company?
Anyway, thanks!!!!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome.
No, I'm just a student.