Tuesday, 20 August 2013

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

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: 750px;
background-color: #111;
padding: 0;
margin: 0;
display: block;
float: left;
border: 1px solid white;
position: fixed;
}
#rightcolumn {
width: 250px;
background-color: #777;
display: block;
float: left;
border: 1px solid white;
}

No comments:

Post a Comment