Styling with CSS
#container {
min-width: 800px;
max-width: 1000px;
height: 100%;
margin: 0 auto;
text-align: left;
}
#left-section {
height: 100%;
position: relative;
float: left;
width: 20px;
background: #FFF url('img/bodybg_left.jpg') repeat-y left;
}
#right-section {
height: 100%;
position: relative;
float: right;
width: 20px;
background: #FFF url('img/bodybg_right.jpg') repeat-y right;
}
Markup in HTML
<div id="container">
<div id="left-section"><!-- LEFT SECTION //--></div>
<div id="right-section"><!-- RIGHT SECTION //--></div>
<table id="content">
...
</table>
<div style="clear: both;"></div>
</div>
The left and right sections are visible on the initial screen view. However, when the table extends beyond the viewport's height (greater than 100%) and I scroll down, the backgrounds do not show below the initial viewport. Is there a CSS solution to address this issue or should I consider using an HTML table? I experimented with setting the position of the background sections to fixed but it did not work as they need to be relative to the dynamic width of the wrapper.
Best regards, Ben
Solution: Try the following CSS or review other answers!
CSS Modifications
#container {
min-width: 800px;
max-width: 1000px;
min-height: 100%;
height: 100%;
margin: 0 auto;
text-align: left;
background: url('img/bodybg_left.jpg') repeat-y left;
}
#left-section {
background: url('img/bodybg_left.jpg') repeat-y left;
min-height: 100%;
}
#right-section {
background: url('img/bodybg_right.jpg') repeat-y right;
min-height: 100%;
}
#content {
width: auto;
margin: 0 20px;
border-collapse: collapse;
border-top: 1px solid #000;
min-height: 100%;
}
HTML Markup Changes
<div id="container">
<div id="right-section"><div id="left-section">
<table id="content">
...
</table>
</div></div>
</div>