Question

I understand how floats can be useful to position elements beside each other and essentially shrink-to-fit, but how would one go about achieving a table like appearance

Column 1        |        Column 2        |        Column 3
Column 4 Bigger |        Column 5        |        Column 6

Notice how the first set of columns adjusts to fit the length of the largest element? So if column 4 is wider than 1, 1 will automatically be wider? So far the only way I can achieve this is by using display: table and display: table-cell, but its a little flaky because I have to set specific widths etc. Unless i’m doing something wrong, maybe tables are somehow the best way to do this sort of thing…in an otherwise table-less web.

Answer 1

Hope this answers your question :):

<style>
.clear{
clear:both;
}

.column {
float:left;
height :20px;
width: auto ;
margin:5px;
display :block;
}
</style>


<div id = "Column 1 " class="column">
cell 1
<div class="clear"></div>
cell 4 Bigger
<div class="clear"></div>
cell 7
</div>

<div id = "Column 2 " class="column">
Cell 2
<div class="clear"></div>
Cell 5 
<div class="clear"></div>
Cell 8 
</div>

<div id = "Column 3 " class="column">
Cell 3
<div class="clear"></div>
Cell 6 
<div class="clear"></div>
Cell 9 
</div>

EDIT
adding border would be also simple. you can chek that url :
http://www.bernzilla.com/design/tables/table.html