Absolute Block Behaviour

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

The width of the two inner divs 50 and 100 is wider than the enclosing 60px div. Is it necessary to set the enclosing div to 60px? If you remove the width and height restriction then the inner divs will occur next to each other as desired. Otherwise set the width of the div to a number higher than 60, lets say 110px so that the inner divs have room to be side by side.

Answer 2

I think the best way to do it is instead of defining width in pixels, do it in percentages. What will happen is that if you set each to 50% (or 49%), they will both be next to each other. Given that the largest the content can get is 100%, giving each box 50% should work out nicely, unless one side should sometimes be larger than the other.

Edit: Just saw the fact that each needs to be on a single line, which means that one side might be bigger than the other, so my solution might not work.

Answer 3

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>