Creating a CSS-rule to work for both a one and two column layout

Question

This is what I'm trying to do:

(Larger image.)

When the <nav> element is present in the design, I want it to look like the example below. Is it possible to do this while the #content div has got a percentage value set? I'm just curious to see whether this is possible without using two different styles for the #content (both with different width values.)
Just floating doesn't seem to do it.

The reason I want the #content to have a percentage value in the first example is because I have a background image in #body that creates the illusion of an outer glow.

Edit: I just removed the need for using the width percentage by using margins instead.

Answer 1

Check the example here: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

What you should do is to set float:right and width on your <nav> element, and leave #content without any float or width, just set margin. This way content will try to occupy all given space and wont 'fall' into navigation.

Then, if you hide <nav> element, content will automatically resize (but also you will need to remove padding from the right).

This is example code:

<style type="text/css">
    #container { width:700px; margin:0 auto; border:1px solid #000; }
    #nav  { display:none; }
    .double #nav { width:10%; float:right; display:block; }
    #content { margin-right:10%; border-right:1px solid #000; }
</style>

<div id="container" class="double">
    <div id="nav">nav content</div>
    <div id="content">page content</div>
</div>

Now, if you removed class="double" from container element you will see content is correctly resized to take 90% of given space. If you want to take 100% - just add .double before #content in style.