Fixed width sidebar, main content fluid layout

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:

   width: 220px;
   padding: 0px 0px 0px 60px;
   border-right: 2px solid #d1d1d1;
   margin-top: 35px;

   margin: 10px 20px 0px 280px;

    <div id="main-panel">


<div id="left-panel">

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

I have also tried this:
but the sidebar simply disapear.

Any help would be appreciated.

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

<div id="left-panel">

<div id="main-panel">

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.

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.

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.

overflow:hidden has done the trick.