I have a two column solution on my (WP)site, and two make it work when shrinking the browsers width I applied [this solution](https://stackoverflow.com/a/5955286/937624).

It works fine except that the content in the main container gets pushed down. If I float:left both of the containers instead this doesn't happen, but I need a solution like this to make the right container fill the width.

I tried to set the right container to position:relative and the title (h3 tag) in the right container to position:absolute. This pushed the content up to the top but generates other problems.

Why is this happening and how to solve it?

```
______________________________
||     ||                   ||
|| SB  ||                   ||
||     ||                   ||
||     ||                   ||
||     || Title             ||
||     || Foo text          ||
||     ||                   ||
||     ||                   ||
------------------------------

```

**html:**

```
<div id="main">
    <div id="sub-menu">
        //content
    </div>
    <div id="post-24" class="post post-add">
        //content
    </div>
</div>

```

**css:**

```
#main {
    padding-left: 5px;
    margin-left: 22px;
    margin-top: 28px;
    padding-right: 30px;
    height: 100%;
}

#sub-menu {
    float: left;
    padding: 20px 30px;
    width: 220px;
    height: 400px;
    margin-right: 30px;
    border-radius: 3px;
}

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    margin-left: 320px;
}

```