Floating DIVs with auto-adjusting widths

trevortrey

New Member
I currently have the following HTML:\[code\]<div class="clearfix"> <div style="width:33%;float:left">content</div> <div style="width:33%;float:left">content</div> <div style="width:33%;float:left">content</div></div>\[/code\]When there are 3 divs on the one line, and because I specified a percentage width for each, they all fully occupy the width of the parent width. What I am trying to achieve is to have the floating divs auto-adjust their widths (i.e. without hard-coding a percentage width) depending on how many divs are present on the line. For example, if there are 2 divs, then each would occupy half of the entire width of the parent (i.e. 50%). If there are 3 divs, then 33%.Is this possible with floating divs? If not, what other ways can I use to achieve this type of fluid layout? I looked into making the parent use a 'table' display and the inner divs a 'table-cell' display, but then the parent stopped occupying 100% of the width available to it.
 
Back
Top