How do I create two columns using CSS?

I'm new to CSS and I wonder how I could make two columns 开发者_如何学Goand also two rows inside wrapper. The first row contains title images. Here's my code: http://sudrap.org/paste/text/24958/

What I want to achieve:

Edit: Here's the whole html http://sudrap.org/paste/text/24961/

You don't need all that HTML. It could be as simple as this:

<div id="main-wrapper">
    <div class="left-box">
        <h2>Oyunlar</h2>
        <ul>
            <li>...</li>
        </ul>
    </div>
    <div class="right-box">
        <h2>Sunumlar</h2>
        <ul>
            <li>...</li>
        </ul>
    </div>
    ...
</div>

with the following CSS:

.left-box, .right-box {
    width: 15em;
    float: left;
}
.right-box {
    border-left:1px solid #999;
}
.right-box h2 {
    margin-left: -1px; /* hide box border */
}
.box h2 {
    background-color: #D8E9E6;
    border-top: thin solid #97b4e0;
    border-bottom: thin solid #97b4e0;
}