2 column layout in CSS

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

I get my css layouts from this site: http://csseasy.com/

Select your layout, view source and copy it.