Absolute positioning and overflow-x

Question

The markup is the following:

<div class="mask">
    <div id="content-1" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div id="content-2" class="content-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div> 
</div>

and this is the CSS

.mask{
    position:absolute;
    width:300px;
    height:300px;
    overflow-x:hidden;
}
.content-item{
    position:absolute;
    width:300px;
}
#content-1{
    left:10px;
}
#content-2{
    left:305px;
}

Fiddle here: http://jsfiddle.net/steweb/9zMhY/ (without a fixed height)

I need a mask just because I want to make a transition from content-1 to content-2. There are no problems about the transition itself (content-1 morphs to -300px left and content-2 morphs to 0px left).

Above you can see that height is set to 300px, and overflow-x:hidden work as expected!

BUT I don't want to set an height to the mask! Well, if I remove height I can't see anything, just removing overflow-x:hidden everything appears.

The question is: without changing the positioning method (I need absolute positioning, with float would be much easier), how could I obtain a simple overflow-x without setting a fixed height? Why is overflow-x:hidden hiding everything instead of hiding just everything on the left/right?

Answer 1

The box model of absolutely positioned elements doesn't influence their parent containers.

Thats very logical because they are just not inside but absolute. Everthing else would be weird.

However floating elements behave the same way, which is often inconvinient.

A common practice to fix this is a "clearfix" .

You can put something like at the bottom of your parent container.

Another way is to set the height manually. I am not exactly sure what you want to do but do you really need the children to be absolute?