How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/

css, html

Solution

This answer may have to be modified depending on what you were trying to achieve with `position: fixed;`. If all you want is two columns side by side then do the following:

http://jsfiddle.net/8weSA/1/

I floated both columns to the left.

Note: I added `min-height` to each column for illustrative purposes and I simplified your CSS.

body {
  background-color: #444;
  margin: 0;
}

#wrapper {
  width: 1005px;
  margin: 0 auto;
}

#leftcolumn,
#rightcolumn {
  border: 1px solid white;
  float: left;
  min-height: 450px;
  color: white;
}

#leftcolumn {
  width: 250px;
  background-color: #111;
}

#rightcolumn {
  width: 750px;
  background-color: #777;
}

<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>

If you would like the left column to stay in place as you scroll do the following:

http://jsfiddle.net/8weSA/2/

Here we float the right column to the right while adding `position: relative;` to `#wrapper` and `position: fixed;` to `#leftcolumn`.

Note: I again used `min-height` for illustrative purposes and can be removed for your needs.

body {
  background-color: #444;
  margin: 0;
}

#wrapper {
  width: 1005px;
  margin: 0 auto;
  position: relative;
}

#leftcolumn,
#rightcolumn {
  border: 1px solid white;
  min-height: 750px;
  color: white;
}

#leftcolumn {
  width: 250px;
  background-color: #111;
  min-height: 100px;
  position: fixed;
}

#rightcolumn {
  width: 750px;
  background-color: #777;
  float: right;
}

<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>

Problem

Original source