Question

HTML

Sorted it for seo

<div class="content">Content</div>
<div class="nav1">
  <ul>
  <li>nav 1</li>
  <li>nav 2</li>
  <li>nav 3</li>
  </ul>
</div>    
<div class="nav2">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

CSS

.nav1 {
    width:100px;
    float:left;
}
.nav2 {
    width:100px;
    float:right;
}
.content {
    width:100%;
    float:right;
    background:#09F;
}

the numbering:

1: content

2: nav1

3: nav2

4: container

I want something like that;

https://i.stack.imgur.com/AH5OR.jpg

But the result is bad.

https://i.stack.imgur.com/ypCft.jpg

Answer 1

Live Demo

This will work as it is, providing the content will be higher than the menus. If that’s not the case, then you can adjust the min-height value on .content. You should set it to the height of your highest menu.

HTML:

<div id="container">
    <div class="content">Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /></div>

    <div class="nav1">
        <ul>
            <li>nav 1</li>
            <li>nav 2</li>
            <li>nav 3</li>
        </ul>
    </div>

    <div class="nav2">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
        </ul>
    </div>

    <div id="footer">footer</div>
</div>

CSS:

#container {
    width: 80%;
    margin: 0 auto;
    position: relative
}
.nav1 {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc
}
.nav2 {
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    background: #ccc
}
.content {
    margin-left: 100px;
    margin-right: 100px;
    background: #09f;
    min-height: 200px
}
#footer {
    background: #999
}