Question

I’m trying to work out the following bit of CSS:

<style type="text/css">
.parent {
    position: relative;
    height: 140px;
}
.parent .leftbit {
    width: 370px;
    position: absolute;
    top: 0px; left: 0px;
}
.parent .rightbit {
    width: 220px;
    position: absolute;
    top: 0px; left: 370px;
}

</style>
<div class="parent">
    <div class = "leftbit">abcdef</div>
    <div class = "rightbit">111111</div>
</div>


<div class="parent">
    <div class = "leftbit">ghijk</div>
    <div class = "rightbit">222222</div>
</div>

This works fine how but I want the height of the divs to be automatic such that they stack up netly one after the other regardless of the height of the content in the left and rightbit divs..
When I remove the ‘height: 140px;’ line the parent the divs print over the top of each other.
I assume this is because the code doesn’t know the height of the leftbit and rightbit divs and so just takes the parent to have no height and therefore just prints the parent divs in the same place.
Can anyone tell me how to get the parent div to take on the height of the left and right divs. I can see a way to do it by adding extra functions and some Jquery code but this seems like overkill, I think I’m missing a more obvious way to do it but I can’t work it out.
Thanks.

Answer 1

Fiddle

Use float instead of position: absolute;

.parent {
    position: relative;
    border: 1px solid #f00; overflow: hidden;
}
.parent .leftbit {
    width: 370px;    
    top: 0px; float: left;
}
.parent .rightbit {
    width: 220px;
    top: 0px; float: right;
}