CSS DIV pagelayout

[bicicletaire]

Hi!

I have my page divided in left, right and main blocks, using the CSS DIV pagelayout. The three blocks do not have the same size in all my pages, so when the main block is longer than the left or right blocks, the background color of the left/right blocks does not continue until the main block ends.

What can I do to make the three blocks grow at the same time?

The CSS DIV pagelayout of my page looks like this:

Code: Select all

/* CSS for DIV pagelayout */

#container {
	width: 900px;
	\width: 920px;
	w\idth: 900px;
	border: 2px groove #151b4d;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
        padding: 1px;
}

#headerBlock {
	padding: 0px;
	margin-bottom: 0px;
	background:#fdf8de;
        border-bottom: 1px solid #fdf8de;
}

#mainBlock {
	padding: 10px;
	margin-left: 180px;
	margin-right: 168px;
        margin-top: 0px;	
        background-color:#e7cdaa;
        border-left: 1px solid #151b4d;
        border-right: 2px solid #ffffff;
        border-top: 1px solid #151b4d;
}

#leftBlock {
	float: left;
        width: 165px;
	\width: 175px;
	w\idth: 165px;
	margin: 0;
	margin-right: 0px;
        margin-left: 0px;
	padding-right: 10px;
	padding-left: 5px;
        padding-top: 10px;
	padding-bottom: 5px;
	background: #fdf8de;
        border-right: 1px solid #151b4d;
        min-height: 375px;
}

#rightBlock {
        float: right;
	width: 158px;
	\width: 168px;
	w\idth: 158px;
	margin: 0;
	margin-left: 0px;
	padding: 5px;
        padding-top: 10px;
	background-color: #f4b225;
        border-top: 1px solid #151b4d;
        min-height: 375px;    
}

#footerBlock {
        clear: both;
	padding: 5px;
        background-image:url(/picture/template/mosaic_lang.jpg);	
}

/* End CSS for DIV pagelayout */

Thanks a lot!
Olga

[flip-flop]

Big John´s Piefecta: 3 Columns, fixed width (Any column may be longest)

Knut

[bicicletaire]

Hi Knut,

thanks for the answer, (I wasn't online for a while...)

mmm... but that means that I will have to change from CSS Div to "Eigene". That means, I will have to start everything form the beginning?
I assume that if I change to "Eigene", the blocks I have now with CSS will not work anymore...is there no easier way?

Hope there is...

Olga

[update]

This will be the easiest way - freedom - at your hands
Give it a try and you'll ask yourself how life without "Eigene" could have happened until now

[flip-flop]

A little bit experimental: Embed the fields "header:", "footer:", "left:", "right:" in "main:"

Knut

[bicicletaire]

...the experiment did not really work, so I guess I will change to "eigene"...
Thanks for the help!
Olga