Two column layout with one having a fixed width in CSS

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 l

Answer 1

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