I'm relatively new to CSS programming and I need a hand. I decided to create a stylesheet from scratch to compliment fresh HTML for my company's website. I'll post the relevant code below (since the site has not gone live), but here's my issue:
I have a very simplistic fixed width, 3 column layout with both a header and a footer. In the left and right columns, I have specified a background image to repeat on the y axis, but the repeat will not go the full height of the page (which should be determined by the column div with the greatest height as I understand it). Instead, the repeats on both columns will only go as far as their respective content. I've been scouring the interwebs for solutions and comparing code against what I have determined by my layout; I've tried fixing heights to auto, to 100%, clearing floats, etc, nothing works. I've tested in both IE9 and FF5.
I would love to see the left and right column backgrounds extend all the way down to the footer. I can almost guarantee that the middle column content will be the highest.
And help would be greatly appreciated. Thanks.
-Steve
CSS
#container { margin; 0 auto; width; 1000px; background: #fff; }
#header { width: 1000px; background: #006400 }
#navigation { float: left; width: 1000px; background: #006400 }
#content-container { float: left; width: 1000px; background: #fff; }
#leftcol { float: left; width: 200px; padding: 10% 0; margin: 0; background-image: url('gradient1.jpg'); background-repeat: repeat-y; }
#content { float: left; width: 500px; padding: 5% 0; margin: 0; }
#rightcol { float: left; width: 300px; padding: 10% 0; margin: 0; background-image: url('gradient3.jpg');}
#footer { clear: left; background: #ccc; text-align: center; padding 0; height: 1% }
HTML
<body>
<div id="container">
<div id="header">
...
</div>
<div id="navigation">
...
</div>
<div id="content-container">
<div id="leftcol">
...
</div>
<div id="content">
...
</div>
<div id=rightcol>
...
</div>
</div>
<div id="footer">
...
</div>
</div>
</body>
