I'm trying to make the parent div only as wide as the child div's. Auto width is making the parent div fit the entire screen. The children divs will be different widths depending on their content so I need the parent div to adjust accordingly.
<div style='width:auto;'>
<div style="width: 135px; float: left;">
<h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
<dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
<dd style="white-space: nowrap;">1</dd>
<dd style="white-space: nowrap;">2</dd>
</dl>
<h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
<dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
<dd style="white-space: nowrap;">1</dd>
<dd style="white-space: nowrap;">2</dd>
</dl>
</div>
<div style="width: 135px; float: right;">
<h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
<dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
<dd style="white-space: nowrap;">1</dd>
<dd style="white-space: nowrap;">2</dd>
<dd style="white-space: nowrap;">3</dd>
</dl>
</div>
</div>
Best Answer
Your interior
<div>
elements should likely both befloat:left
. Divs size to 100% the size of their container width automatically. Try usingdisplay:inline-block
instead ofwidth:auto
on the container div. Or possiblyfloat:left
the container and also applyoverflow:auto
. Depends on what you're after exactly.