DIV with Fixed Position along with Floating DIVs not working - html

Question

Please look at this JsFiddle.
JSFiddle
<div class="main" >
<div class="menufixedleft">
Fixed Menu Should not Scroll
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
I am trying to have a menu div on the left fixed, content on center and sidebar on right.
It's not working when i have the center and right side bar, float left. The center div overlays the fixed div on the left.
Is my only option is to float the 2 divs(center and right sidebar) to the right ?
Thanks !

Answer 1

Make room for the fixed element by giving main either padding-left:100px; or margin-left:100px depending on how you want it to look (The 100px comes from how wide the fixed element is)
Updated jsFiddle

Answer 2

Check out this JSFiddle: http://jsfiddle.net/J2tt6/1/
Here's the CSS code:
body {
padding: 0;
margin: 0;
}
.main{
height:500px;
width:550px;
background:pink;
position:relative;
}
.menufixedleft{
height:200px;
width:100px;
position:fixed;
left:0;
top:20px;
background:green;
}
.content{
height:400px;
width:200px;
background:blue;
position: absolute; /* should not float, as fixed elements are above everything else. */
left: 100px;
}
.rightsidebar{
height:200px;
width:100px;
background:red;
position: absolute; /* once again, don't float. */
left: 300px;
}

Answer 3

When you set position: fixed to your left navigation, it is taken out of the layout. To keep it in, you will need to contain your menu in another element, which remains in the layout.
HTML:
<div class="main">
<div class="menu">
<div class="affix">
Fixed Menu Should not Scroll
</div>
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
CSS:
.menu {
float: left;
min-height: 1px;
width: 100px;
}
.affix {
height: 200px;
width: 100px;
position: fixed;
left: 0;
top: 20px;
background: green;
}
JS Fiddle