Hi, I am trying to float several divs on the left inside an enclosing div. All the inside divs should: - have the same height, the one from the enclosing div. - show a scroll bar if the content doesn't fit in the width/height of the div - not use the width property with px, ems, %. - stack up on the left side like books on a bookshelf
I don't want to have to calculate the width each time I need to add a new column or the width of an existing column changes. I want the browser to allocate the width as needed. I got that to work in IE6 with the following HTML and CSS, but in FF1.5, the last div shows up below the other divs instead of staying in the box defined for the enclosing div. Any idea of what's missing? I re-read all my CSS books about float and clear, unfortunately none of the examples are for that use case. Anyone has a link to a good web site about floats? Thanks a million. Fred ============================================= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Float Test</title> <style> body { font-family: helvetica, verdana, tahoma; padding: 20px; padding-top: 32px; font-size: 14px; } h2 { font-family: helvetica, verdana, tahoma; font-size: 14px; margin: 0px; } .ui3-accordion { width: 500px; height: 500px; max-height: 500px; font-size: 95%; } .ui3-accordion-header { display: block; height: 100%; max-height: 500px; padding-left: 5px; padding-right: 5px; background-color: #6666FF; color: white; text-align: center; font-weight: bold; border: 1px solid black; float: left; } .ui3-accordion-content { height: 100%; max-height: 500px; overflow: auto; background-color: #E0E0FF; float: left; width: auto; border: 1px solid black; } </style> </head> <body> <h2 id="title">Float Test</h2> <br /> <!-- First Accordion --> <div class="ui3-accordion"> <div class="ui3-accordion-header"> <div style="position: relative; top: 2%;">1abcd</div> <div style="position: relative; top: 91%;">First</div> </div> <div class="ui3-accordion-content"> First content </div> <div class="ui3-accordion-header"> 2 </div> <div class="ui3-accordion-content"> Second content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum leo neque, nonummy nec, pharetra sed, ultricies sed, ligula. Nam placerat sollicitudin nulla. Aenean fringilla dui nec felis. Praesent nec mi ut erat tempor semper. Nunc a urna non magna semper lobortis. Nunc sit amet velit. Nulla facilisi. Ut quam justo, laoreet vel, lacinia non, tristique non, risus. Nulla facilisi. Nunc convallis tortor sit amet nunc pellentesque sodales. Morbi eros metus, tincidunt id, laoreet at, mollis placerat, turpis. Fusce ac purus. Nunc augue. Vivamus sapien nisi, pulvinar vel, dignissim vitae, adipiscing at, sem. Aliquam non risus. Mauris lacus ligula, viverra in, vehicula sit amet, scelerisque et, magna. Praesent tempor elit volutpat ante. Nullam vestibulum accumsan eros. </div> <!-- id="secondcontent" --> <!-- End First Accordion --> <div style="clear: both">----</div> </div> <!-- ui3-accordion --> </body> </html> ============================================= ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
