Code Answer: 2 column layout in CSS

Hi, I want a nice 2 column layout using CSS float's.

Column#1 160 px Column#2 100% (i.e. the rest of the space).

I want to place the Col#2's div first, so my layout looks like:

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

What has to be get this effect?

From stackoverflow

You should use the "float" CSS property for doing this. Check out for a simple implementation here. And you can find a bit more detailed article here

I think you could do something like this.

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

This relies on col1 coming before col2, which might make it unusable.

This will not, but relies on col1 being the longer:

#content {
  position: relative;   
}
div#col2 {
  width:160px;
  position: absolute;
}

div#col1 {
  width:100%;
  margin-left: 160px;
}

This'll keep the footer in place.

div#footer {
  clear: both;
}

mabwi : This doesn't work.

Neither of the above will work.
```
    div#col2 {
  width:160px;
  float:left;
  position: relative;

    }

    div#col1 {
      width:100%;
      margin-left: 160px;
    }
```
That's assuming that Column 2 should appear as a left sidebar, with col 1 as the main content.

sblundy : I think it's the other way around.

Paul Kroll : Remember that when you refer to other questions, they aren't "above" or below, because as they collect votes, the order of questions changes. Use a quote from the answers, or avoid the phrasing altogether: if you say "bob's answer" well, they might answer AGAIN after yours.

Carl Camera : This is the answer but mabwi needs to exchange #col1 <-> #col2. Voted up in anticipation of the correction.
I get my css layouts from this site: http://csseasy.com/

Select your layout, view source and copy it.

Philip Morton : Nice link, never seen that site before.

Code Answer