one liquid div with one fixed size div

[Datis]

i have a layout like this :

<div id="main" style="width:100%; height:500px; background-color: #ccc;">
    <div id="right" style="float: right; width:100px; height:500px; background-color: red;">
    </div>
    <div id="left" style="margin-right: 100px; height:500px; background-color: orange;">
    </div>
</div>

how can i make the left div width flexible when the right div is not present in page, something like sidebar that are not present in all pages

[RyanReese]

You'd need to set a class on a parent, aka set a class="noleftbar" on the <div id="main"> element.

Then just remove the right margin on the left column

.noleftbar #left{margin-right:0;}

There is no automatic way though

[Datis]

thnx for your reply, i have attached two sample pictures that i want to build, i am asking again because i think i couldnt explain it well
in main page i have a container div with 960px width which has 2 divs inside it, one floated div in right with 100px width and another div which i want to fill the remaining area of container, in other pages the right div with 100px width is not present so i want the left div fill the whole area of container
is it possible with pure css ? or should i use some js ?
thnx again

[RyanReese]

Again, you will need to identify those pages that have no sidebar, and add a class to a parent (I choose the #main element).

My post explains how to do that way. There is no otehr way with CSS (correctly anyway).

JS could be used but there really is no need unless you yourself won't know if pages won't have the sidebar.

[Paul O'B]

Hi,

Yes you can do this with css if you use overflow and haslayout instead of margins.

Here are some very very old examples.

http://pmob.co.uk/temp/2col-into-onecol.htm
http://www.pmob.co.uk/temp/3col-overflow-toggle.htm
http://www.pmob.co.uk/temp/overflow-toggle.htm

The js is just used to hide the element for the demo and is not required. Nothing else is changed.