two-column layout with relative width?

Question

I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?

Here's what I have now:

<div id="container">
  <div id="left" style="float:left"> </div>
  <div id="right" style="float: right; width: 500px"> </div>
</div>

Answer 1

Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.

Answer 2

You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.

<div id="container">
    <div id="right" style="float: right; width: 100px; "> </div>
    <div id="left" style="padding-right: 100px; "> </div>
</div>

You can see it in action here.

Answer 3

Change style of you left div to:

<div id="left" style="margin-right:500px"></div>

This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.

Important

Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.

Solution to your particular problem

So you have two div elements

<div id="endants-content">
    <div id="screenshot-preview">...</div>
    <div id="endants-main-content">...</div>
</div>

And CSS should be like this to make it work as expected:

div#endants-content
{
    /* put min-width here is you need it */
}

div#screenshot-preview
{
    float:right;
    width:30%;
}

div#endants-main-content
{
    margin-right:30%;
    overflow:auto;
}