Two column layout with one having a fixed width in

Question

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

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 2

Although the question is for years ago, I provide this useful answer for any future reference and similar cases.

Putting #col1 before #col2 in markup, you may float it to the right, in case you have LTR lauout (if you have an RTL layout then float to the left) and give the other col overflow: hidden.

Note that the parent ( #content ) should have the overflow: hidden too:

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}

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

Answer 3

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 4

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 5

You have to use float:left on first column and float:right on the second column