create a 4x3 grid of css panels

Question

I am trying to find a CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php

If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.

Thanks in advance

Decbrad

Answer 1

the page you link uses an UL as outer element and an LI as inner element so you have this:

<ul>
    <li>Feature1.1</li>
    <li>Feature1.2</li>
    <li>Feature1.3</li>
</ul>
<ul>
    <li>Feature2.1</li>
    <li>Feature2.2</li>
    <li>Feature2.3</li>
</ul>
<ul>
    <li>Feature3.1</li>
    <li>Feature3.2</li>
    <li>Feature3.3</li>
</ul>

use a CSS definition like thid:

ul{
    float:left;
    width: // your width here
    display:block;
}

li{
    list-style: none;
    display:block;
}

etc.

That said, I think a CSS table layout is better for this:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout