Hey all,

This is a novice question, I'm sure, but it's giving me fits...

Basically, I have two floating divs side-by-side with a containing div that stretches the length of the browser window. I want the left div, the nav panel, to be a set width, and the right div, to shrink with the browser.

The problem is that as it shrinks, the right div pushes the left one down, instead of just contracting as much as possible.

Here's the CSS:

#user_left_content {
    display: block;
    float: left;
    width: 200px;
    margin-right: 10px;
}

#user_right_content {
    display: block;
    float: right;
    width: 65%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #949494;
    padding: 5px;    
    min-height: 200px;
}

Thanks in advance!

try floating both left, for they are side by side, then setting the width to 100% on the right.

Switched them both to left, but I couldn't do 100% width with the left margin, or it pushes off the page. With the way it is now, they stack, so they're not side-by-side anymore.

Any ideas?

#user_left_content {
    display: block;
    float: left;
    width: 200px;
}

#user_right_content {
    display: block;
    float: left;
    width: 80%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #949494;
    padding: 5px;    
    min-height: 200px;
    margin-left: 210px;
}

Figured it out... just had to take one float off and reorder some stuff... but thanks to everyone for the help!

#user_left_content {
    width: 200px;
    float: left;
}

#user_right_content {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #949494;
    padding: 5px;    
    min-height: 200px;
    margin-left: 210px;
}