1

In the following SSCCE, why does the #sliderArea div overlap the #topBar div above it, while div is a block-level element?

I expected it to appear below the #topBar?

JsFiddle here.

#left-div {
  float: left;
}
#right-div {
  float: right;
}
a {
  margin: 10px;
}
#topBar {
  width: 100%;
}
#sliderArea {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}
#four-cols {
  margin: 5px 100px 5px 100px;
}
#col-one {
  background-color: orange;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-two {
  background-color: blue;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-three {
  background-color: green;
  height: 125px;
  width: 100px;
  display: inline-block;
}
#col-four {
  background-color: red;
  height: 125px;
  width: 100px;
  display: inline-block;
}
<div id="topBar">
  <div id="left-div">
    <a href="#">Login</a>
  </div>
  <div id="right-div">
    <a href="#">Menu One</a>
    <a href="#">Menu Two</a>
  </div>
</div>
<div id="sliderArea"></div>
<div id="four-cols">
  <div id="col-one"></div>
  <div id="col-two"></div>
  <div id="col-three"></div>
  <div id="col-four"></div>
</div>
potashin
  • 44,205
  • 11
  • 83
  • 107
Solace
  • 8,612
  • 22
  • 95
  • 183

4 Answers4

4

You need to clear the floats :

div{ clear:both; }

JSFiddle

Or just for #sliderArea element :

JSFiddle

potashin
  • 44,205
  • 11
  • 83
  • 107
2

Add to your CSS:

#topBar {
width: 100%;
overflow: hidden;
}

By adding overflow: hidden to the wrapper of floating elements, the browser can calculate the height of it.

Teknotica
  • 1,096
  • 6
  • 19
2

because of float of the childrens you will need to add

#topBar {
 width: 100%;
 overflow: hidden; <-- add this
}

or

#topBar {
 width: 100%;
 display: inline-block; <-- add this
}

which will clear the floats

demo - http://jsfiddle.net/qbx5vwy5/6/

Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
1

You can add clear where you want them to clear. JSFiddle

.clear {
    clear: both;
}

When you do not clear floats, they will just stick together. By adding clear, you will stop the floating and start a "new" float if it is necessary :)

Thomas Bormans
  • 5,156
  • 6
  • 34
  • 51