Basically I'm laying out a website and I'm using DIV's to have a header, left-column, right-column and footer. I want to have the content section of the website expandable to the html/text inserted into it so i have been using height: auto.
I'm using background images for the top of the header, bottom of the footer and a 1px high filler for the body of the website.
My problem is everything I have tried essentially eliminates the middle background image if I try to have the right-col to the right of the left-col and not under it.
I'm sure this is probably something pretty easy but I have been on it since last night and I'm about up done trying to figure it out.
it's valid XHTML and CSS (except for jQuery UI stuff that is CSS3, though that shouldn't matter structurally).
Any ideas or could someone point me to a tutorial on how to get a two column layout using background images?
<body>
<div id="top">
THE TOP IMAGE GOES HERE IN CSS
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="right-col">
</div>
</div>
</div>
<div id="bottom">
THE BOTTOM IMAGE GOES HERE IN CSS
</div>
<div id="footer">
</div>
</body>
#wrapper {
margin: 0 auto;
width: 838px;
background-image:url('../images/wrapper_bg.gif');
background-repeat:repeat-y;
}
#header {
width: 818px;
color: #333;
padding: 10px;
height: 100px;
}
#navigation {
width: 838px;
}
#content {
width: 838px;
color: #333;
margin: 0px 0px 0px 0px;
/*min-height: 800px;*/
height: auto;
}
#footer {
width: 838px;
color: #333;
text-align: center;
}
#top{
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_top.gif');
}
#bottom{
clear: both;
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_bottom.gif');
}
#left-col{
margin-left: 20px;
width: 590px;
float:left;
height: auto;
}
#right-col{
width: 170px;
display: inline;
height: auto;
margin-right: 25px;
color: #777777;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
http://www.wholehealthconnect.org/home.php is the website.
Can anyone help me get the middle div to expand to content as well as have the right col next to the left col and still have the background image behind them?