Take the 2-minute tour ×

I have this issue: two floating divs inside an absolute-positioned parent div.


.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; /* doesn't do anything! */
.left {
    float: left;
.right {
    float: right;
.clear {
    clear: both;


<div class="wrapper">
    <div class="left">some text here</div>
    <div class="right">some text here too</div>
    <div class="clear"></div>

In Firefox, if the wrapper doesn't have position:absolute, everything works, as intended. As soon as I make it absolute, the wrapper shrinks and the content in floating divs overlap the rest of the document. Also, if I set the wrapper's width to 100% it overlaps the vertical scrollbar.

What am I missing?

share|improve this question
You've only described what you're currently observing. Please describe what the desired outcome is supposed to be. –  Sparky Mar 26 '12 at 21:15
What I wanted is to have a div on top of the page that wouldn't scroll and would take all width of the document. Inside the div I wanted to have two divs, one left aligned and another right aligned. –  Vlad Mar 26 '12 at 22:35

3 Answers 3

Since you're using the overflow: hidden clearfix, the div.clear is completely unnecessary. But since you're also positioning your wrapper absolutely the overflow: hidden clearfix is also unnecessary as position: absolute will also clearfix (at least in Chrome and FF).


share|improve this answer
You are right. But it still doesn't seem expand 100% horizontally. As I said, if I put width:100%, it overlaps the scrollbar. –  Vlad Mar 26 '12 at 21:11
Hmm, it seems to work fine for me (now without a width anywhere): jsfiddle.net/j6jkk/3 and jsfiddle.net/j6jkk/4 You could also try inline-block instead of float: jsfiddle.net/j6jkk/5 and jsfiddle.net/j6jkk/6 –  powerbuoy Mar 26 '12 at 21:16

Floating an element takes it out of the document flow. That means it will not have an impact on its parent's dimensions, and absolutely positioned elements are 0 x 0 by default. Clearing the floated element's next sibling is only going to expand the width of the parent container if you actually have content in that element, have its width set in its style, or one of its other siblings still in the document flow has width greater than the parent's initial width.

See this article from the Mozilla Developer Network, although this is true of CSS in general, not just Firefox:

float - MDN

Regarding the width: 100% issue, if the offset parent of the wrapper is the document, this may be how Firefox responds to the positioning style. You might be able to alleviate that by placing the absolutely positioned element in an empty div with position set to relative.

share|improve this answer
After fidgeting with Firefox on jsfiddle, I couldn't reproduce any problem of that sort. It may just be that your left style isn't set. See the fiddle here. –  lthibodeaux Mar 26 '12 at 21:26

Try adding this:

    display: inline-block;
share|improve this answer
Nope, nothing changed. –  Vlad Mar 26 '12 at 21:01
Any link maybe? –  Miha Eržen Mar 26 '12 at 21:11

Your Answer


