Fluid layout: resizeable left content with fixed width sidebar

where sidebar falls under content and HTML is under content, no min-width

[PublicSphere]

I'm trying to produce a layout like this:

ccccc ss

Where c = content and is resizable and ss = sidebar and is fixed width.

Also when the page is reduced to a small width the sidebar needs to fall under the content. I can do this easily by floating the sidebar right, in the content and placing the sidebar HTML above the other content, but I want to have the sidebar content beneath the main content.

The difficulty is that I'm trying to build these columns inside the central column of a three column fluid layout with two fixed width sidabars.

So it's like this:

yy ccccc ss yy

When I shrink the window width eventually the ccccc ss is forced under the yy sidebars causing a large white space to appear between the yy's and above the lowered ccccc ss -- if you don't scroll down it looks like the content has dissapeared. Unfortunately I can't change the yy HTML/CSS.

This is not a problem in browsers that have min-width enabled, but the design has to work in _<IE6.

So I need the ss to fall under the c so that the c takes up the space rather than them both being forced down together causing a large space to appear. Furthermore I'd like the ss HTML to be coded beneath the c HTML for readability/accessibility/seo reasons.

I fiddled around with negative margins for a while but couldn't figure it out.

Anyone come accross this one before?

[edited by: PublicSphere at 12:25 pm (utc) on Jan. 10, 2008]

[SuzyUK]

without seeing how "yy" is coded here's one solution for the ccccc ss scenario which might fit in

I fiddled around with negative margins for a while but couldn't figure it out.

It uses negative margins so should be able to be swapped without changing source order:

CSS:
html, body {margin: 0; padding: 0;}

#wrap {float: left; width: 100%;}

#contentwrap {float: left; width: 100%; min-width: 500px; margin-right: -201px;}
#content {margin-right: 201px; background: #cbc; border: 1px solid #000;}

#sidebar {float: left; width: 200px; background: #abc;}

HTML:
<div id="wrap">
<div id="contentwrap"><div id="content">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></div>

<div id="sidebar">sidebar</div>
</div>

I've put a min-width in, which won't work for IE6, but there are various min-width workarounds if actual content means it doesn't degrade the way you would like.
might help?

[PublicSphere]

Thanks SuzyUK. I will take a look at this next week as I don't have time this week but just thought I'd let you know I've read.

Think this is similar to where I was going with the right margin.