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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![James Payne](https://uploads.teamtreehouse.com/production/profile-photos/294732/micro_carlietemplemen_pic.jpg)
James Payne
Courses Plus Student 10,139 PointsFloats
Hi all, hoping someone can help me out and point me in the right direction please, it seems I have hit a wall.
Apologies in advance for the fairly long post and if i haven't made sense or you need more info please let me know.
Here goes . . .
I was under the impression that when you float an element you need to clear that float which is done by applying a 'clear fix' rule to it's parent element? Please correct me if I'm wrong.
Okay so here is what I'm struggling with . . .
My header element seems to be a lot higher than 140px. The only way I can get this to the correct height is by applying my clear fix to my main-wrap element, which is confusing me a tad as I don't have any elements inside my main-wrap that are floated??
It looks like my section element is collapsing under my main element. Again, not sure why as there isn't anything floated in the main or section elements??
Here is the html code . . .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<header>
<div id="bar">
<div id="bar-wrap" class="clear"><p id="quote-info">Get a quote now<a href="tel:012345678910">01234 567 8910</a></p></div>
</div>
<div id="header-wrap" class="clear">
<a href="#" id="brand">Quisque <span id="limos">et</span></a>
<nav id="header-nav">
<ul>
<li><a href="#">Our Vehicles</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div id="main-wrap">
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<p id="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et egestas sem.</p>
<a href="#" class="btn">Find out more</a>
</div>
</main>
<section>
<div id="section-wrap">
<h1>Lorem ipsum dolor sit amet</h1>
<div id="service-1" class="service">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et egestas sem. Vivamus et quam tincidunt, vestibulum sem quis, tristique.</p>
</div>
</div>
</section>
<footer>
<div id="footer-wrap">
<nav>
<ul id="footer-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Vehicles</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</nav>
<p id="copy">sit amet © | 2006 – 2014</p>
</div>
</footer>
</body>
</html>
and css
html,
body {
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow: hidden;
position: relative;
}
p {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
#bar-wrap,
#header-wrap,
#main-wrap,
#section-wrap,
#footer-wrap {
max-width: 1200px;
margin: 0 auto;
max-height: 100%;
}
#bar {
width: 100%;
background-color: #333;
}
#bar-wrap {
height: 100%;
color: #fbfbfb;
}
a[href^="tel"] {
color: #bca95b;
margin-left: 8px;
}
header {
width: 100%;
height: 140px;
background-color: #fbfbfb;
}
#quote-info {
float: right;
margin: 10px 0;
}
#brand {
font-size: 38px;
font-weight: 700;
float: left;
margin-top: 20px;
color: #bca95b;
}
#limos {
color: #333;
font-weight: 300;
letter-spacing: -1px;
}
#header-nav {
margin-top: 26px;
float: right;
}
#header-nav ul {
margin-top: 9px;
}
#header-nav li {
display:inline;
font-size: 18px;
padding: 0 30px 0 0;
letter-spacing: -0.50px;
}
#header-nav li:last-child {
padding: 0;
}
#header-nav a {
color: #333;
}
main {
width: 100%;
background: #666 url(../images/bg.jpg) no-repeat center;
background-size: cover;
}
#intro {
font-size: 60px;
font-weight:700;
letter-spacing: -0.5px;
color: #fbfbfb;
margin: 100px 0 80px;
text-align: center;
}
#desc {
font-size: 18px;
font-weight: 400;
color: #fbfbfb;
text-align: center;
}
section {
width: 100%;
background-color: #fbfbfb;
}
#cta {
margin: 0 auto;
}
.btn {
width: 125px;
height: 40px;
background: #bca95b;
background-image: -webkit-linear-gradient(top, #bca95b, #91834c);
background-image: -moz-linear-gradient(top, #bca95b, #91834c);
background-image: -ms-linear-gradient(top, #bca95b, #91834c);
background-image: -o-linear-gradient(top, #bca95b, #91834c);
background-image: linear-gradient(to bottom, #bca95b, #91834c);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: 'Open Sans', sans-serif;
color: #fbfbfb;
font-size: 15px;
font-weight: 300;
padding: 12px 16px;
text-decoration: none;
}
footer {
background-color: #fbfbfb;
position:absolute;
bottom:0;
width:100%;
height:80px;
}
#footer-nav {
font-weight: 300;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
#footer-nav li {
display: inline;
margin-right: 20px;
}
#footer-nav a {
color: #333;
}
#copy {
font-size: 12px;
text-align: center;
margin-top: 40px;
}
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after {
clear: both;
}
.clear {
zoom: 1;
}
1 Answer
![Salmen Bejaoui](https://uploads.teamtreehouse.com/production/profile-photos/235342/micro_1507321_10202321798759937_897868772_o.jpg)
Salmen Bejaoui
8,017 Pointsusing Chrome, the header is 140px height ! i recommend you to use Normalize to reset all.
You use an anchor tag to create a button .The anchor tag have as default an inline display property , try to ad display: block to .btn class