Fixed width sidebar, main content fluid layout

HTML & CSS
1

Hi. i need to implement a layout with 1 fixed with sidebar at the left of the page and the main content fluid:

First i tried this:

#left-panel{
   float:left;
   width: 220px;
   padding: 0px 0px 0px 60px;
   border-right: 2px solid #d1d1d1;
   margin-top: 35px;
}

#main-panel
{
   margin: 10px 20px 0px 280px;
}
}


    <div id="main-panel">

 </div>


<div id="left-panel">
</div>

In this case the sidebar left margin of main-panel still occupies space so the sidebar drops.

I have also tried this:http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid
but the sidebar simply disapear.

Any help would be appreciated.

2

Your version will only work if you reverse the order of the divs:

<div id="left-panel">
</div>

<div id="main-panel">
</div>

On the Dynamic Drive site they are able to keep the main panel first in the HTML by sneakily wrapping the main content in a floated div of 100% width.

EDIT: actually, in addition to reversing your divs, you would need to make the main-panel’s left margin at least 282px, to make room for the sidebar’s 220px width + 60px padding + 2px border = 282px total width.

3

Ok. It works fine but i have problems clearing floats in main-panel.
All the code i put after clearing a float goes to the bottom of a page (after the left-panel):

It makes sense becuase i make clear:both and because the main panel is not floated it clears the floated left-panel.

4

Remove clear: both and try overflow:hidden.

If that doesn’t work, try to explain a little more clearly what you are doing. Ideally, post a link so we can see what’s happening.

5

overflow:hidden has done the trick.

Thanks:D