Question

Have been searching the net for the past hours to find a solution to this, but couldn’t find it, so here I am.

I need the width of the div to be 100% minus the width of the left div.

So that the div to the left of it stays the same width (390px) but the other div adjusts its size depending on the resolution . I have found the solution where it has a fixed width div on both sides, but just cant figure this out.

Answer 1

Simple solution:

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS:

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.