CSS - Fixed-Fluid Columns

Question

In the body of my site, I am trying to create two columns - one on the far right with a fixed width (300px) for advertisements etc, and one on the left which will take up the remaining space on the page. How can this be accomplished in CSS?

Answer 1

CSS:

#right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

In HTML:

<div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>

Answer 2

You might also want to check out the YUI: CSS Grid Builder. It is a simple web interface where you specify what grid layout you are looking for, and they will provide you the html code you can use in combination with the YUI Grids CSS framework to get your desired layout. One nice thing about the YUI Grids CSS framework is it has good cross browser support which saves you time getting it to work across different browsers. You can also reverse engineer the code that you are provided from the grid builder to get some ideas on how you can do it on your own. The settings you will want to use with the YUI: CSS Grid Builder to get your desired layout is as follows:

1. Body Size: 100%
2. Body Columns: Sidebar right 300px

Answer 3

Here is a tool to generate fixed liquid columns for placing adsense ads.