CSS two column layout aligned-left?

I have a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off 开发者_JS百科to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.

How can I accomplish this?

How about floating them both to the left and use percentage values to set their width.. Like below:

#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}

Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):

HTML:

<div id="content"><div class="in">
CONTENT HERE
</div></div>

<div id="sidebar">
SIDEBAR HERE
</div>

CSS:

#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
     #content .in {margin-right:300px;
                   /*sidebar's width or more for space between blocks*/}

There are lots of method to do that.

It depends :

• if you want a fixed width layout, or a relative one.
• if you want the layout to be centered or not.
• etc.

A sketch of what you want or/and your actual code would help.

Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.