No replies
sjm247
sjm247's picture
Offline
newbie
Last seen: 11 years 6 days ago
Timezone: GMT-5
Joined: 2010-01-20
Posts: 1
Points: 2

Have a layout of 7 divs. header,container, menu bar, left, middle, right, footer.

My problem seems to be a popular one, but I can not seem to find a fix that will fit our needs.

I need the 1st column and the 4 column, which is the very left and very right to cover the full length of the content (middle). The middle is composed of 2 columns, which is all ok. The 4th column will extend down to the footer if the content extends past the 4th column. However, the 1st column does not. It stops after the content in the column no matter what. This then makes an ugly white space below the 1st column, between that and the footer.

Here is code:

#sitehead {
width: 1200px;
background: url("/images/logo-3.png") no-repeat;
height: 110px;
margin: 0 auto;
}
#topmenu {
background-color: #ddd;
background: url("/images/topmenu.png") repeat-x;
margin: 0px 0 0px;
margin-bottom: 0px;
padding: 5px 0 5px;
text-align: center;
}
[trimmed]

#container {
width: 1250px;
background: #fff url(/images/rightmenu.png) repeat-y scroll right top;
margin: auto;
padding: 0;
text-align: left;

}

#leftbar {
float: left;
border: 0;
width: 200px;
padding: 10px;
margin: 0;
background: #ddd url("/images/rightmenu.png") repeat-y 50% 0;
border-left: 2px solid #bbb;
border-top: 0;

}

[trimmed]

#rightbar {
float: right;
border: 0;
width: 200px;
padding: 10px;
margin: 0;
background: #ddd url("/images/rightmenu.png") repeat-y 50% 0;
border-left: 2px solid #bbb;
border-top: 0;

}

#footer {
clear: both;
font-size: 11px;
background-color: #ddd;
background: url("/images/bottommenu.png") repeat-x;
padding: 2px 0 3px;
margin-top: 10px;
text-align: center;

}
[trimmed]
#content {
float: left;
padding: 0;
padding-left: 10px;
padding-right: 10px;
margin: 10px;
margin-bottom: 0;
text-align: left;
vertical-align: top;

}

Layout in php page is:

sitehead div /div

container div

topmenu div /div

leftbar div /div

rightbar div / div

content div /div

footer div /div

container /div

note the content div which is in the middle is added on after the left and right bars due to there are several files that are used for content (not my design) therefore the last statement in the 1st page (the header) is

, then it loads the rest of the index page for content.