Can't get div to stretch down all the way
Hi!
I hit a brick wall trying to have two graphic elements always stay on the left and right edges of the browser window while stretching all the way down. The elements need to repeat-y so I put them inside two divs. I can get the elements to fill 100% of the browser window, but it always stops there (which means that when I have a lot of content in my main_content div, the side elements stop where the 100% of the browser window height was).
I have a page with a structure like this:
<body>
<div id="I_want_this_guy_to always_stay_on_the_left_edge_of_the_browser">
</div>
<div id="I_want_this_guy_to always_stay_on_the_right_edge_of_the_browser">
</div>
<div id="wrapper_here_goes_all_my_content">
<div id="main_content">
</div>
</div>
And I have CSS like this:
html {
height: 100%;
}
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
background-position: 600px
margin: 0px;
padding: 0px;
height: 100%;
}
#wrapper_here_goes_all_my_content {
width: 855px;
margin-right: auto;
margin-left: auto;
height: 100%;
position: relative;
min-height:100%
}
#main_content {
background-image: url(images/bg_red_paper.png);
width: 805px;
background-repeat: repeat-y;
min-height: 800px;
padding-top: 125px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
#I_want_this_guy_to always_stay_on_the_left_edge_of_the_browser {
background-image: url(images/big_sidefilm_left.gif);
width: 198px;
min-height: 100%;
background-repeat: repeat;
float: left;
}
#I_want_this_guy_to always_stay_on_the_right_edge_of_the_browser {
background-image: url(images/big_sidefilm_left.gif);
width: 198px;
min-height: 100%;
background-repeat: repeat;
float: left;
}
But it doesnt work.. The two side elements will only strech 100% of the original browser window frame and not where the content on the main_content is pushing the window to stretch.
I also made a crappy picture of the problem, allthough I'm not sure if it helps to illustrate
Any help will be highly appreciated! Thanks!
