CODEWITHSUNDEEP
htmlcss
ryandlf
ryandlf

Reputation: 28555

Lining stuff up with floats instead of tables?

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.

Upvotes: 3

Views: 79

Answers (2)

Jeffrey Nicholson Carré
Jeffrey Nicholson Carré

Reputation: 3040

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

Upvotes: 1

oksushi
oksushi

Reputation: 102

There would be no way with floats alone to make the width of Column 1 dependent on the width of Column 4 Bigger (i.e. for it to get wider as Column 4 Wider got wider).

Instead, you may like to enclose Column 1 and Column 4 Wider inside a floated container, and then remove the floats from Columns 1 & 4. Likewise, do the same for 2 & 5, and 3 & 6.

Upvotes: 0

Related Questions