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:
<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home5.html">http://www.snowvalley.ws/home5.html</a><!-- m -->
And a link to the page with the "background-repeat:repeat-y": <!-- m --><a class="postlink" href="http://www.snowvalley.ws/homeBG.html">http://www.snowvalley.ws/homeBG.html</a><!-- m -->
Thank you for your help!margin:0px 0px 0px 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
A lot of this is not necessary. margin:0; does the same as all the above.
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
These are also unnecessary since "normal" is the default.
Doesn't answer your question but ...thanks for the tips!
totally missed out my repetition of the margin attribute.
Back to the pressing matter though.
IE doesn't even show your footer at all. Maybe that's a clue.thanks for pointing that out. Didn't even notice that. BUT unfortunately, it didn't change my luck. The footer now shows up but the left hand side still doesn't repeat.
<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home5.html">http://www.snowvalley.ws/home5.html</a><!-- m -->
That's the link that matters now.
I noticed that if I don't have "height:100%" in the classes "content" and "sidebar", the bg color for both doesn't go all the way to the bottom.
Note:
I ended up finding an alternative solution for my problem by altering the bg image, making it the bg of the holder box (added snow white to the right side of the image) and now it works.
<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home7.html">http://www.snowvalley.ws/home7.html</a><!-- m -->
But if anyone knows how to do it another way, I would really like to hear it! Thanks again.
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:
<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home5.html">http://www.snowvalley.ws/home5.html</a><!-- m -->
And a link to the page with the "background-repeat:repeat-y": <!-- m --><a class="postlink" href="http://www.snowvalley.ws/homeBG.html">http://www.snowvalley.ws/homeBG.html</a><!-- m -->
Thank you for your help!margin:0px 0px 0px 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
A lot of this is not necessary. margin:0; does the same as all the above.
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
These are also unnecessary since "normal" is the default.
Doesn't answer your question but ...thanks for the tips!
totally missed out my repetition of the margin attribute.
Back to the pressing matter though.
IE doesn't even show your footer at all. Maybe that's a clue.thanks for pointing that out. Didn't even notice that. BUT unfortunately, it didn't change my luck. The footer now shows up but the left hand side still doesn't repeat.<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home5.html">http://www.snowvalley.ws/home5.html</a><!-- m -->
That's the link that matters now.
I noticed that if I don't have "height:100%" in the classes "content" and "sidebar", the bg color for both doesn't go all the way to the bottom.
Note:
I ended up finding an alternative solution for my problem by altering the bg image, making it the bg of the holder box (added snow white to the right side of the image) and now it works.
<!-- m --><a class="postlink" href="http://www.snowvalley.ws/home7.html">http://www.snowvalley.ws/home7.html</a><!-- m -->
But if anyone knows how to do it another way, I would really like to hear it! Thanks again.