Floats

Question

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 &amp; 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 &copy; | 2006 &ndash; 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;
}

Answer 1 · 2014-02-28T19:09:26Z

February 28, 2014 7:09pm

using 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

Welcome to the Treehouse Community

Looking to learn something new?

James Payne

James Payne

Floats

1 Answer

Salmen Bejaoui

Salmen Bejaoui