Question

I have the following HTML snippet:

Block 1:
<div style="position: absolute; top: 105px; left: 15px;">
    <div style="float: left; width: 50px; height: 40px;"></div>
    <div style="float: left; width: 100px; height: 20px;"></div>
</div>

Block 2:
<div style="position: relative; width: 60px; height: 20px;">
    <div style="position: absolute; top: 15px; left: 15px;">
        <div style="float: left; width: 50px; height: 40px;"></div>
        <div style="float: left; width: 100px; height: 20px;"></div>
    </div>
</div>

Block 1 is an ordinary absolute positioned DIV, while in block 2, the same DIV is enclosed within a relative positioned DIV.

My problem is, on Block 2, the absolute DIV inherits the width property from its parent, thus rendering the child DIVs on top of each other. Compare that to Block 1 where the child DIVs are floated side by side properly (because maximum allowable width is assigned).

Is there any fix for this situation? The height and width given are arbitrary and can change at any time. The child DIVs shouldn’t set any width because the content keeps changing (I put some here for illustration purposes). I can set a certain width, but people with different browsers and DPI settings keep getting different result, so it’s best to keep the child DIVs’ width unset.

Update for bounty:

The intended usage of the above HTML is similar to the following:

Block 2:
<div id="main" style="position: relative; width: 60px; height: 20px;">
    Main Text
    <div id="columncontainer" style="position: absolute; top: 20px; left: 0px; width: 100px;">
        <div id="leftcolumn" style="float: left;">
                Item 1: Left Column, Line 1<br />
                Item 2: Left Column, Line 2<br />
                Item 3: Left Column, Line 3<br />
        </div>
        <div id="rightcolumn"  style="float: left;">
                Item 4: Right Column, Line 1<br />
                Item 5: Right Column, Line 2<br />
        </div>
    </div>
</div>

Notes:

• leftcolumn and #rightcolumn width is not static, so there’s no specific width that can be set. The width should follow the longest text (each item in a single line).

• I can set #columncontainer width to a specific width (which I am doing right now), but if the text is too long, then the left-right column is messed up (#rightcolumn below #leftcolumn, which is correct because of not enough space).

• main width is set to a specific width, which in all possible case will be much less than #columncontainer width.

• I’m open for JS solution, as that may seem to be the only consistent solution I can think of.

Answer 1

In Block 2, the absolutely positioned div doesn’t strictly inherit its width from its parent. If that were the case, setting its width to auto would do the trick. Instead, its relatively positioned parent has become its “containing block“, establishing a context inside which the absolute div lives, so to speak.

The only way to “break out” of that containing block is to set a width on it so it overflows, as you were doing. If you set that width to a value that will usually be good enough, you could further control how the floats inside it behave by setting (percentage) min-width and max-width values on them.

But do you really need the #columncontainer div to be inside #main, other than to position it relative to #main‘s coordinates?

What you could do instead is make them siblings in a common parent div (the rest of the CSS remains the same):

<div style="position: relative">
    <div id="main">...</div>
    <div id="columncontainer">...</div>
</div>