Question

I want to make a html layout,this is the image:

The whole page contain the divs:

Head
left
main01
main02

And the control div:

toogle_bar1
toogle_bar2

Now I want to make the following effect:

1) The head take a specified height of the browser(for example 50px),and take 100% width of the browser.
2) And by default,the main02 is not visible,so the main01 div take the same height of the left and take the left width.

3) When the toggle_bar1 clicked,the left should be hide/shown,once it is not visible,the main01 (and main02 if main02 is visible) will take all the width of the browser.

4) When toggle_bar2 clicked,the main02 should be hidden/shown,once it is visible,it will take the same width as main01.

5) the main01 and main02 should have a explictly width and height property.
6) The scroll bar can not be visible anyway when the window resize.

In fact,I can make it using the javascript,but I wonder If I can make it using the pure css(of course the js is need to handle the click event)?

Since now I use the js,when the toggle_bar1 clicked,I set the left to “display:none”,then caculate the clientwidth,and set the width of the main01(or/and main02),I wonder if this can be caculated by the browser?

I always think that we should avoid do the extra position cacualte work if they can be done by the browser.

Any ideas?

Answer 1

You could add remove CSS Classes to the Main Wrapper.

Let say you have the MainWrapper and in it “Left”, “Middle”, “Right”

then you can add or remove CSS Classes from the MainWrapper

.left-item, .right-item, .middle-item { // this are the classes in the Wrapper
some base info
}

.has-left.has-middle .left-item {
width:30%;
} 
.has-left.has-middle .middle-item {
width:70%;
}
.has-left.has-middle .right-item {
display:none;
}

What you would have to do with the other combinations, you should know.

No you just use js to “add” or “remove” your css classes, and css does it for you.
MainWrapper Classes: has-left, has-middle, has-right
remove one of them, and your css adjusts.

It sounds like you dont need any generic version, so this could do it…