Doing my head in - what am I doing wrong?

HTML & CSS
1

Hi,

This has been driving me up the wall all morning!

I have the following:

				<div id="featured_gallery_wrapper" style="background: red">


					<div class="featured_gallery_box size">
						Title
					</div> 
					<div class="featured_gallery_box size">
						Title
					</div> 
					<div class="featured_gallery_box size">
						Title
					</div>


				</div>
				<div id="featured_gallery_wrapper_no_border">
					<img style="padding-left: 0px;" src="/images/at_10.jpg" width="309" height="13" />
				</div>

…with the following CSS:

#featured_gallery_wrapper {
	width: 307px;
	border-right: 1px solid #DFDFDF; 
	border-left: 1px solid #DFDFDF; 
	background-color:#F4F4F4; 
}

.featured_gallery_wrapper_no_border {
	width: 307px;
	background-color:#F4F4F4; 
}

.featured_gallery_box {
	float: left;
	width: 85px;
	padding-top:6px; padding-left:8px; padding-right:5px; 
	background-color:#F4F4F4; 
	font-weight: bold;
	border-bottom:none; 
	border-top:none;
}

This works perfectly fine when looking at it locally (with ONLY that in the page), but as soon as I add it to the design , it breaks (no background color, no borders etc)

However - if I remove this part:

					<div class="featured_gallery_box size">
						Title
					</div> 
					<div class="featured_gallery_box size">
						Title
					</div> 
					<div class="featured_gallery_box size">
						Title
					</div>

…and simply replace it with “foo”… then the background, borders etc all work fine!!!

Can anyone see my boo-boo?

You can see a working example of it here:

THE TENNESSEE TRIBUNE - Detailed Classified “a new test classiedi”

(on the right menu bar, below the “Events Calendar”)

TIA!

Andy

2

What should it look like?

3

Add overflow: hidden; to your ‘featured_gallery_wrapper’ css selector.

That will force the <div> to wrap itself around the ‘floated’ content inside it.

4

OMG you legend - that did the trick! Thanks! :cool:

Cheers

Andy