CODEWITHSUNDEEP
css
Zack Burt
Zack Burt

Reputation: 8455

two-column layout with relative width?

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>

Upvotes: 1

Views: 1120

Answers (3)

Robert Koritnik
Robert Koritnik

Reputation: 105029

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;
}

Upvotes: 1

Pat
Pat

Reputation: 25675

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.

Upvotes: 2

dmr
dmr

Reputation: 22333

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.

Upvotes: 3

Related Questions