Positioning nested divs with CSS

advertisements

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>


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/