Q: Positioning nested divs with CSS I want to position child divs within parent divs, however the child divs are overflowing outside parent divs. Please run the code below in a browser, to have a better idea of the problem:
I want to position the inner most divs horizotally and the outer divs shoud just fit the inner div.
 <div class='list' id='list1' style='padding: 1px; border : 5px groove; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
    <div class='tuple tuple1' id='tuple1_1' style='padding: 2px; border : 1px solid; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
        <div class='elmnt elmnt1 elmnt1_1' id='elmnt1_1' style='padding: 2px; border : 1px dotted; position: relative; left: 6px;  min-width: 3px; width: 100; min-height: 3px; height: auto;' >
            <div class='list' id='list2' style='padding: 1px; border : 5px groove; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
                <div class='tuple tuple2' id='tuple2_1' style='padding: 2px; border : 1px solid; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
                    <div class='elmnt elmnt2 elmnt2_1' id='elmnt2_1' style='padding: 2px; border : 1px dotted; position: relative; left: 6px;  min-width: 3px; width: 100; min-height: 3px; height: auto;' >jdk-7u11-linux-i586.rpm</div>
                    <div class='elmnt elmnt2 elmnt2_2' id='elmnt2_2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >107M </div>
                    <div class='elmnt elmnt2 elmnt2_3' id='elmnt2_3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >nadeem </div>
                    <div class='elmnt elmnt2 elmnt2_4' id='elmnt2_4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >2013-01-23 </div>
                    <div class='elmnt elmnt2 elmnt2_5' id='elmnt2_5' style='padding: 2px; border : 1px dotted; position: absolute; left: 430px; top: 2px; min-width: 3px; width: 100; min-height: 3px; height: auto;' >00:53 </div>
                </div>
            </div>
        </div>
    </div>
</div>


A: Setting the position property to absolute causes your divs to collapse. Remove or change the property and the divs will wrap around the content. 
http://jsfiddle.net/YMsR4/1/

A: If you want this to scroll you would need to add an overflow attribute to the div that is to serve as the parent.
For example adding
overflow: auto;

to the #list2 causes all of the children to scroll within it.

A: I would agree with what others have suggested. Using absolute positioning is what is making the flow different than your expectations. I would try making the DIVs position:relative and float:left the child DIVs. In fact, assuming what you are trying to build here is a horizontal menu, I would use an unordered list to provide the structure instead of nested DIVs; something like this:
<div id="menu">
<ul style="list-style-type:none;">
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 1</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 2</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 3</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 4</li>
</ul>
</div>

Hyperlinks, and even images, can be added to make it functional. Once it displays as you prefer, you can move the inline CSS to a separate stylesheet for ease of maintenance. 
NOTE: if you choose to use the float property, the element and its parent must be position:relative and a width should be specified.
