I'm trying to create a fluid design.

Header, Main, Sidebar, Footer.

I don't want the sidebar to have a fixed width. That would be the easy way.

I want the site to grow and shrink proportionally depending on sceen size and resolution.

From the book "Pro CSS and HTML Design Patterns" by Michael Bowers I got a pattern for this. It's called the outside-in box.

Problem I have is that when I only use width, MAIN and SIDEBAR shrinkwrap around the text. I've put MAIN on 65% and SIDEBAR on 35%, but because there is little text, they shrink like a dried apple and are actually only 50% of the width with huge amounts of background showing through.

My key problem is: how do I get the MAIN and the SIDEBAR columns (both floated left) to actually take up their full space. I only get them to be as large as the text they contain, and this looks awful.

Any idea to define the size of a column without actually using pixels?

I don't know if i understand correctly what is you want to do, but this worked for me (combined, the 2 div's have 100% width):

<div style="width="100%; min-height: 300px; ">

    <div style="float: left; width: 65%; min-height: 300px; background-color: #99CCFF;">
    some text
    </div>

    <div style="float: left; width: 35%; min-height: 300px; background-color: #FFFFCC; ">
    some other text
    </div>

</div>

So, you have to remove the shrink-wrapping functions so that the percentage-based boxes stay the width you define them to be, and that should equal 100%, as noted above.

The problem is to combine the outside-in box model with width set to percentages that needs to nest four divs into each other.
______________



<div id="middle_section"> this contains both the "main" section and the "sidebar" section. set to 100%.

<div id="container_main_container"> set to 65%, so it only takes 65% of the width.
<div id="main_container"> this is set to 100% to ensure that all the main div, including padding, is included in the width.
<div id="main" > here's the actual mark-up for main.
</div>
</div>
</div>

<div id="container_sidebar_container"> set to 35%, so it only takes 35% of the width.
<div id="sidebar_container"> this is set to 100% to ensure that all the main div, including padding, is included in the width.
<div id="sidebar" > here's the actual mark-up for sidebar.
</div>
</div>
</div>

</div> closing the div of "middle section" which wraps "main" and "sidebar".


_______________

It's probably overly complex, but it's logical.

1. First you have a div "main" that includes all the mark-up, including the non-scalable paddings and borders.

2. Then you put a div around and set this to 100%. This includes all the paddings and borders in a 100% unit, and so makes everything scalable.

3. Then you put another div around, and set it to 65%. So, these 100% of "main" will only take 65% of width.

4. Then you put another div "middle" around "main" and "sidebar" and set it to 100%, so "main" would be 65% of these 100%, and "sidebar" 35%.

But it's still shrinkwrapping.

What I wrote passed the validator for both XHTML and CSS, but it doesn't work.



PS: In future I will use em for padding and margins for scalability. But it puzzles me why this one doesn't work and all this stuff doesn't stop shrinkwrapping. At the moment it doesn't even get "main" and "sidebar" next to each other. They exceed the 100% and go in line underneath each other, and shrinkwrapped.

Well, I got it to work.

The trick was to put the float element not in the innermost level.

Because the float is not in the "main" div but in its container, the shrinkwrapping stops.

I have also fully scalable boxes that can be defined by percentages, because the borders, padding, etc. is included due to the container.

What's left to do:

One of the two columns is shorter than the other. I have to find a possibility to stretch it to the same size the longer column has.

Not sure if that's possible.