Two colums layout, center column needs to be liquid but no margins can be used.

hello CSS gurus

I am trying to make a layout with two colums, a menu and the content column.
The menu will have a button that will completely collapse it (like the lateral menu on www.webmastershelp.com ).

I need the content column to fill the empty space left when the menu is collapsed.

The normal way to make the two columns layout would be something like this:



The problem is that if i set a right margin to the content area it will not fill the empty space left when the menu is collapsed.
If i put no margin the menu will appear over the content.

So my question is this, ¿is there any way to make it so that the content area will fill all the screen but will not be under the menu, and also when the menu collapses it'll fill the empty space?.

I did this before but with tables i'm looking for a way to make it using css and divs.
Thanks in advance.
Gaston

 

1. Float the menu right, right margin of, say, 15px.
2. Use javascript to insert the button element into the DOM and add button width to main's margin value onload
3. Float the button container right with no margin.
4. Main content is static with right margin = menu margin + menu width + (button width +) gutter width.
5. Button's onclick handler makes menu display none, and makes main content margin right = button width + gutter width.

Using the onload event handler to insert the button means if javascript is disabled, the button doesn't even show, and its space is filled by main.

Looks like it would be easy to do, and there would be no javascript mixed with the html—very clean markup.

cheers,

gary

 

Try using: http://www.csscreator.com/version2/pagelayout.php : )

 

Thanks for your time gary, i had something like that in my mind but you made it better .

However what i'm looking for is not the java script, but a way to avoid using the right margin for the content div, but at the same time it should not be under the menu.

I already have a javascript function that will collapse any target div, so i want the content div to change it's width automatically without the need to change the margin using js.

With tables it's something like this:

<table width="100%" border="1">
<tr>
<td>Content </td>
<td bgcolor="#cecece" width="214">lateral menu</td>
</tr>
</table>

Code (markup):

And when i click the hide button the js function will hide the lateral menu, and the content cell will autmatically expand because it has no width setted

<table width="100%" border="1">
<tr>
<td>Content </td>
</tr>
</table>

Code (markup):

I'd like to use the javascript function i already have because it uses cookies to remember the status of the menu.

So what i need is a content div that will fill all the screen space but that will stop if there is another div. That way when i take out the other div, the content div fills all the screen.
Just like in the tables exaple i posted

Thanks so much for your time and great ideas
Gaston

 

From the diagram, I made a few assumptions:

• You want discrete appearing columns, eg. by border or background;
• There is a definite gutter between columns;
• You don't want the main column's content wrapping around the menu column if it's the longer of the two.

If that's a fair assessment, the margin is pretty well required. Too, this is a behavior issue, so javascript is what you use make the change.

There's no reason not to use cookies to save the conditions. Toggling the main's margin is one or two lines of code as part of the button's onclick handler's function.

cheers,

gary

 

Ok,
thanks for your time kk5st, i'll see what i can do