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

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>

More Related Contents:

Leave a Comment Cancel reply