Menu
Hi,
I’m currently trying to get into divs and I made a site with a table layout and am currently trying to transfer it to div positioning.
I came across a problem though.
My page consists of a banner at the top which stretches across the whole site and below that 2 columns: a side bar menu on the left (with a background image that repeats) and the content section to its right.
The problem is with the “second” row corresponding to the side bar (div#side1) and content (div#content) sections. When the content section is longer (height-wise) then the side bar section, the side bar section doesn’t accompany the content section down to the bottom.
Here’s my css code for the divs:
div#head {
position: absolute;
width:900px;
height:120px;
left:0px;
top: 0px;
background-color: #FFFAFA;
}
div#columns {
position: relative;
width: 900px;
top: 120px;
height:100%;
background-color: #FFFAFA;
}
div#side1 {
position:absolute;
width:115px;
height:100%;
top: 0px;
left:0px;
background-color: #FFFAFA;
background-image:url(lefthandsidebar.jpg);
background-repeat:repeat;
}
div#content {
position: relative;
width: 758px;
height: 100%;
top: 0px;
left: 282px;
background-color: #FFFAFA;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 15px;
line-height: 18px;
}
I found an alternative way of doing it by putting the bg image of the side bar as the bg of the holder (div#columns) and for that I used the “background-repeat: repeat-y;” code.
If it is possible to do it another way I would be interested in finding out cus I’m stumped.
Here’s a link to the test page:
[url]http://www.snowvalley.ws/home5.html
And a link to the page with the “background-repeat:repeat-y”: [url]http://www.snowvalley.ws/homeBG.html
Thank you for your help!