Question

I am relying on the CSS property overflow:hidden to contain 3 nested & floated divs. The overflow:hidden is applied to the parent div of this html.

When I don’t use overflow:hidden my last div is out of place within a line of floated divs, but when I do use overflow:hidden the entire div structure moves downwards.

Hopefully someone can understand what I mean by the text above, but in-case not I’ll provide CSS code too.

CSS:

#header {
  display: block;
  width: 590px;
  height: 50px;
  background: #336699;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  overflow: hidden;
}

.header-left-wrapper {
  float: left;
  width: 150px; height: 50px;
  background: #ff0000;
}
.header-input-wrapper {
  float: left;
  width: 300px; height: 50px;
  background: #00ff00;
}
.header-right-wrapper {
  float: right;
  width: 140px; height: 50px;
  background: #ff0000;
  overflow: hidden;
}

To clarify, for some reason when I apply overflow:hidden to .header-right-wrapper, the entire header moves down as if I just applied a margin or position. Any help? Thanks in advance.

Answer 1

.header-right-wrapper is dropping because, as a floated element, it needs to clear something else on the page (.close). When you give #header {overflow: hidden} it’s forced to contain its children, at least to the point that it reaches its {height}, including that floated div. Therefore it moves down. The problem is not your markup related to #header, but the Lightbox layout as a whole. Here’s one fix:

.close {margin-bottom: -100px;}

http://jsfiddle.net/ZETus/4/

Another approach would be to take .close out of the flow using absolute positioning, so that the float doesn’t have to clear it:

http://jsfiddle.net/ZETus/5/

.close {
    position: absolute;
    right: -10px;
    top: -10px;
}