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

Question

So I've been trying to align two divs side by side without overlapping. I have one div which will be fixed as a sidebar and the right div as the content. Hopefully, someone can help me.

body {    background-color: #444;    margin-top: 0;    margin-bottom: 0;  }    #wrapper {    width: 1005px;    margin: 0 auto;    padding: 0;    overflow: auto;  }    #leftcolumn {    width: 250px;    background-color: #111;    padding: 0;    margin: 0;    display: block;    border: 1px solid white;    position: fixed;  }    #rightcolumn {    width: 750px;    background-color: #777;    display: block;    float: left;    border: 1px solid white;  }

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

Answer 1

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>