Esteban Rodriguez Esteban Rodriguez - 5 months ago 13
CSS Question

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

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.

HTML:

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


CSS:

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

Answer

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 simply do the following:

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

I simply floated both columns to the left. I added min-height to each column for illustrative purposes.

HTML

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

CSS - you'll notice 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;
}

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. I again used min-height for illustrative purposes and can be removed for your needs.

CSS

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