Why do I lose CSS when floating a div?

Question

So I'm trying to create a responsive layout. Everything works great until I float a div to the left. I then lose:

HTML

<body>
    <div class="wrapper">
    <h1>Site Title</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#">Home</a>
        <a href="#">Home</a>
        <a href="#">Home</a>
        <a href="#">Home</a>
        <a href="#">Home</a>
    </nav>

    <h2>hello world</h2>
    </div>

</body>

CSS

.wrapper {
    margin: 10px auto;
    width: 90%;
    max-width: 980px;
    background-color: yellow;
    overflow: auto;
}

nav {
    background-color: #222;
    padding: 0;
    margin: 10px 0;
}


nav a { color: #F9F9F9; display: block; float:left;  padding: 10px;  }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

Working but I want to float it left http://jsfiddle.net/rktjam2k/4/

Problem when nav a is floated left: http://jsfiddle.net/rktjam2k/3/

yeah, they are generally better practice for what you are trying to achieve. By using `display:inline` you will get the horizontal effect and it will allow you to style appropriately. — badfilms, Jan 04 '15 at 16:13
@Gary - there's a long discussion about it at http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/ . But it's irrelevant to the question. — Alohci, Jan 04 '15 at 20:21
Gary, do you actually think that using floats for a navigation is _better_ practice? — badfilms, Jan 04 '15 at 21:15

score 4 · Answer 1 · answered Jan 04 '15 at 16:08

You must clear the floats.

For example, add

nav {
    overflow: hidden;
}

.wrapper {
  margin: 10px auto;
  width: 90%;
  max-width: 980px;
  background-color: yellow;
  overflow: auto;
}
nav {
  background-color: #222;
  padding: 0;
  margin: 10px 0;
  overflow: hidden;
}
nav a {
  color: #F9F9F9;
  display: block;
  float: left;
  padding: 10px;
}
nav a:visited {
  color: #f9f9f9;
}
nav a:hover {
  text-decoration: none;
  background: #27B3CF;
}
nav a:active {
  position: relative;
  top: 0;
}
a {
  outline: 0;
  text-decoration: none;
}
h1 {
  font-family: 'Droid Serif', serif;
  line-height: 75px;
  padding: 10px;
  font-size: 90px;
}

<div class="wrapper">
  <h1>Site Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
  </nav>
  <h2>hello world</h2>
</div>

Or

nav:after {
  content: '';
  display: block;
  clear: both;
}

.wrapper {
  margin: 10px auto;
  width: 90%;
  max-width: 980px;
  background-color: yellow;
  overflow: auto;
}
nav {
  background-color: #222;
  padding: 0;
  margin: 10px 0;
}
nav:after {
  content: '';
  display: block;
  clear: both;
}
nav a {
  color: #F9F9F9;
  display: block;
  float: left;
  padding: 10px;
}
nav a:visited {
  color: #f9f9f9;
}
nav a:hover {
  text-decoration: none;
  background: #27B3CF;
}
nav a:active {
  position: relative;
  top: 0;
}
a {
  outline: 0;
  text-decoration: none;
}
h1 {
  font-family: 'Droid Serif', serif;
  line-height: 75px;
  padding: 10px;
  font-size: 90px;
}

<div class="wrapper">
  <h1>Site Title</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
    <a href="#">Home</a>
  </nav>
  <h2>hello world</h2>
</div>

Thanks for the answer! Works great. Would you be so kind and give an explanation as to why this works and why you must clear floats? Thanks again. — , Jan 04 '15 at 16:11
when you give overflow:hidden to floated element's parent it will clear floats.. you can use clear:both aswell on your h2 tag instead of overflow — Arda, Jan 04 '15 at 16:14
@JonathanSaich If you don't clear the floats, the following block element will be placed at the right of the floated elements. To avoid that, you can make the container wrap the floats with `overflow: hidden` (or anything but `visible`), or you can add `clear: both` (or `left`) to the following element. — Oriol, Jan 04 '15 at 16:17

score 0 · Answer 2 · answered Jan 04 '15 at 16:51

0

because you dont use < in CSS! This should make it work properly

nav < a { color: #F9F9F9; display: block; float:left;  padding: 10px;  }
nav < a:visited { color: #f9f9f9; }

answered Jan 04 '15 at 16:51

Sugafree

631
2
14
30

Why do I lose CSS when floating a div?

2 Answers2