My website layout consists of a centralized wrapper div containing a header, three columns with dynamic heights based on content length, and a footer. I now want to enhance the design by adding background colors that expand in width to the left and right.
If you'd like to see a demo, check out this js-fiddle example: http://jsfiddle.net/SLvYx/
I initially tried using a background .png with a fixed width for the body, but realized it didn't work well with the dynamic height of the columns. While I'm open to exploring JQuery or JavaScript solutions, my scripting knowledge is limited as I am a beginner.
I've scoured numerous resources in search of a similar case without success. Any assistance would be greatly appreciated. Thank you in advance to anyone who can offer guidance.
EDIT: I came across this post on Stack Overflow (https://stackoverflow.com/questions/1775715/dynamic-table-size-html?rq=1) which suggests using a table layout with specific column configurations. Is this approach recommended, or should I avoid tables altogether?
Here is the code snippet from my demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>Test</title>
<style type="text/css">
body {margin:0;}
#wrapper {margin: 0px auto; width: 940px;}
#header {background:red; height:100px;}
#content_wrapper {width: 940px; padding: 0px 0px 0px 0px; background: #CCC; overflow: hidden;}
#leftcolumn {background:yellow; width: 470px; float:left; height:auto; min-height: 680px;}
#middlecolumn {background:goldenrod; width: 235px; float:left; height:100%; margin-bottom: -1000px; padding-bottom: 1000px;}
#rightcolumn {background:darkgoldenrod ; width: 235px; float:left; height:100%;margin-bottom: -1000px; padding-bottom: 1000px;}
#footer {background:lightgreen; height:100px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content_wrapper">
<div id="leftcolumn">
Left Column<br />(Content here)
</div>
<div id="middlecolumn">
Middle Column<br />(Content here)
</div>
<div id="rightcolumn">
Right Column<br />(Content here)
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>