CSS snippet for a 3-column grid. Based on that used for some Apple product pages.
HTML:
<div class="grid3col">
<div class="column first">
...
</div>
<div class="column">
...
</div>
<div class="column last">
...
</div>
</div>
In general, you have to recalculate the widths based on (a) the available full width in your pages and (b) the amount a spacing you want between columns.
CSS, 5 lines
Download
Copy to clipboard1 2 3 4 5 | /* 3-column grid using 840px full width */
.grid3col .column { width: 260px; margin-left: 30px; }
.column { float: left; }
.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }
|
