CSS DIV pagelayout
Posted: Mon 18. Jan 2010, 12:20
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:
Thanks a lot!
Olga
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 */
Olga
