What's the best approach to this type of layout?

I know I can just use margins and padding开发者_运维知识库 to accomplish what I want. But, that seems a little... I dunno, strange I guess. I just feel that there is a more... structured? way of doing this?

Here's what I want to do:

How would you suggest I go about doing this? Any advice is appreciated.

Thank you!

Oh man, there is a css grid system I am in love with, it is SO easy to implement and understand. Check it out, its called the 960 Grid System. Although it is made for 960px it is pretty easy to change.

<div class='container_4'><!-- this will be a container that takes up four grid spots-->
    <div class='grid_1 alpha'><!-- this will start from the first column in the container and will take one spot-->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1'><!-- this takes up next spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1'><!-- this takes up next spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
    <div class='grid_1 omega'><!-- this takes up last spot and extends one col -->
        <h2>Heading</h2>
        <li>List Item</li><!-- et cetera -->
    </div>
</div> <!-- end the container -->

The alpha and omega classes go on the first and last grid items in a row.