Hello!

 

I am coding a simple site for a mate(not my design!) and he has 3 columns in the main content area.

 

I have a #content (container) div, with the 3 columns all floated left inside it.

 

But when I do this, the repeating background image dissapears - can anyone tell my why this is?

 

<div id="content">
	<div id="left">
	<p>Hello......text</p>
	</div>

	<div id="middle">
		<ul id="menu">
			<li class="home"><a href="index.html">Home</a></li>
			<li class="about"><a href="about.html">About</a></li>
			<li class="packages"><a href="packages.html">packages</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="quote"><a href="quote.html">Get A Quote</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>

	</div>
	<div id="right">
		<img alt="" src="img/test-pic.jpg" />
	</div>
</div>

 

#content {
position:relative;
left:53px;
width:807px;
/*min-height:400px;*/
}

#left {
float:left;
width:291px;
padding:0 5px;
text-align:justify;
}

#middle {
float:left;
width:205px;
}

#menu ul, #middle ul, .social ul {
	list-style-type:none;
	padding:0;
	margin:0;
}

#menu ul li {
	display:block;
}
/* menu css goes on for a bit so i removed it here for your viewing...*/		

#right {
float:left;
width:291px;
}

 

Thanks

I'm guessing that the background image is applied to a div that encloses the columns, as there is no background image in the code you've placed above.

 

I think it is probably due to the floats not being cleared before the Content div closes.

 

Put this in your CSS:

.clear {
   float: none;
   clear: both;
}

 

& immediately before the content div closes, put this:

<div class="clear"></div>

I'm guessing that the background image is applied to a div that encloses the columns, as there is no background image in the code you've placed above.

 

I think it is probably due to the floats not being cleared before the Content div closes.

 

Put this in your CSS:

.clear {
   float: none;
   clear: both;
}

 

& immediately before the content div closes, put this:

<div class="clear"></div>

 

Thanks!

Tried the clear:both thing but didn't try it your way!

 

Thanks

 

plus 1'd you

Where are you using the bg image, on the content div?