Two column html layout with stretch and match column

Question

I am looking for a two-stage table layout that behaves like a table . and works in IE7

http://jsfiddle.net/YGb2y/
this works, but it is a table, and as we all know, tables are not an ideal layout. I will use it if necessary, but I would like to find a more semantically appropriate way to do this

notice how the left column is stretched to fit the contained content, and the right column takes up the rest of the available space.

 <table> <tr><td class="left">12345</td><td class="right">...</td></tr> <tr><td class="left">123456</td><td class="right">...</td></tr> <tr><td class="left">1234567</td><td class="right">...</td></tr> <tr><td class="left">12345678</td><td class="right">...</td></tr> <tr><td class="left">123456789</td><td class="right">...</td></tr> <tr><td class="left">1234567890</td><td class="right">...</td></tr> </table> table { width:100%; } .left { width:1px; background-color:blue; color:white; } .right { background-color:gray; } 

I tried changing this to use ul / li / div, but I can either set a fixed width or a percentage left column. There is no width:stretch-to-fit .
http://jsfiddle.net/cj6PR/

HTML

 <ul> <li><div class="left">12345</div><div class="right">...</div></li> <li><div class="left">123456</div><div class="right">...</div></li> <li><div class="left">1234567</div><div class="right">...</div></li> <li><div class="left">12345678</div><div class="right">...</div></li> <li><div class="left">123456789</div><div class="right">...</div></li> <li><div class="left">1234567890</div><div class="right">...</div></li> </ul> 

CSS

 ul { list-style:none; width:100%; } li { clear:both; position:relative; overflow:hidden; } li div { padding:5px; } .left { float:left; width:20%; background-color:blue; color:white; } .right { background-color:gray; } 

Suggestions?

Answer 1

Here is what I ended up with

http://jsfiddle.net/cj6PR/4/

HTML

 <ul> <li><div class="left">12345</div><div class="right">...</div></li> <li><div class="left">123456</div><div class="right">...</div></li> <li><div class="left">1234567</div><div class="right">...</div></li> <li><div class="left">12345678</div><div class="right">...</div></li> <li><div class="left">123456789</div><div class="right">...</div></li> <li><div class="left">1234567890</div><div class="right">...</div></li> </ul> 

CSS

 ul { display:table; width:100%; } li { display:table-row; } li div { display:table-cell; } .left { width:1px; background-color:blue; color:white; } .right { background-color:gray; } 

JS (hack IE7)

 if ($.browser.msie && $.browser.version == 7) { $("ul").wrapInner("<table />"); $("li").wrap("<tr />"); $("li div").wrap("<td />"); } 

Answer 2

You cannot use a fixed width unless you know the maximum width of the content.

You cannot get them one width which is still flexible without javascript if you use 1 div per line.

http://jsfiddle.net/Lp2un/

Answer 3

You can specify the width with an em value, not % , so it will always refer to the size of the text, so it is less likely that it will not be wide enough.

Alternatively, you can specify min- and max-width in px to prevent too much layout spreading. The actual values ​​that you would have to find out for yourself.

(referring to your .left css rule)

 .left { float:left; width:15em; /* or any other value that you consider wide enough */ background-color:blue; color:white; } 

or

 .left { float:left; width:20%; min-width: 125px; /* whatever suits your needs */ max-width: 150px; /* whatever suits your needs */ background-color:blue; color:white; } 

Another alternative is to make your divs behave like a table without an actual table

See http://www.quirksmode.org/css/display.html#table for more on this idea.

Answer 4

I think this is what you are looking for, see the updated demo script .

CSS

 #wrapper { overflow: hidden; } #sidebar { float: left; } #content { overflow: hidden; } 

HTML:

 <div id="wrapper"> <div id="sidebar"> </div> <div id="content"> </div> </div>