I'm working on my website and for some reason I can't figure this out. I usually can but I'm stumped right now. Maybe I'm just up too late.

My "content" div has a y-repeated background, and it worked fine up until I put my "col2" and "col3" divs to float left and right. Does the float command just not like working properly in this type of set up, or am I doing something wrong? I'd appreciate some help!

This is what it's looking like right now;
http://ambrelasweb.com/index2.html

HTML Code:

<div id="content">


<div id="col1">

<img src="http://www.webmaster-talk.com/images/gallery.jpg" /><br /><br/><br/>
<img src="http://www.webmaster-talk.com/images/titleWELCOME.jpg" />
<p>Looks like your looking for a website. Well you've found me either because you've heard about my work, have my
business card, or stumbled across my page. I, Amber Goodwin, create basic web sites for small businesses, and
individuals who seek professional looking websites for a reasonable cost. Through the science that is web design I can bring your, either old website back to life, or create you a whole new one using my skills as a graphic designer so that your presence on the web matters. I can offer a wide variety </br> of skills to incorporate into your website.</p>
<p>&nbsp;</p>
</div><!--END OF col1-->



<div id="col2">
<img src="http://www.webmaster-talk.com/images/titleWHY.jpg" />
<p>It allows your potential clients to reach you in a way of which is comfortable to them. The internet is vast and every year it grows. There is a demand for websites for businesses or individuals and it helps if you have one. There are many aspects to creating a website and I can help you with some or all of them. <br /><br />These include; Professional Photographs, Logo Design, Web Design, Web Site Maintenance, Basic Search Engine Optimization (SEO), Tutor in FTP Access aka. Dreamweaver. </p>
</div><!--END OF col2-->


<div id="col3">
<p>Request for Estimates Form goes here!</p>
</div><!--END OF col3-->


</div><!--END OF content-->

CSS code

#content {
width: 786px;
height: auto;
padding: 0px;

background-image: url(images/BOXmiddle.jpg);
background-repeat: repeat-y;
color: #ffffff;
}




#col1 {
margin-left: 15px;
width: 760px;
height: auto;

padding-right: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #71b23d;
}




#col2 {
float: left;
margin-left: 15px;
width: 350px;
height: auto;

font-family: Georgia, "Times New Roman", Times, serif;
color: #5b4781;
}



#col3 {
float: right;
width: 405px;
height: auto;

font-family: Georgia, "Times New Roman", Times, serif;
color: #5b4781;
}

Hi,

Just apply the float property to "content" div and your background will appear.

Hope this helps,
Cheers,

Maneet Puri

The problem is that you need to CLEAR your floats - see our stickies for methods to do that. Maneet has given you one method, floating the container will automatically clear the floats within it. Another method is to apply overflow:auto or overflow:hidden to #content.

Wow. Thank you so much! Argh! I can't believe I couldn't figure that out! I ended up just putting the #content to float:left

Thank you so much guys!