Looking to bring DIV under text

HTML & CSS
1

Hi there,

I am looking to have the div titled ‘content’ changed to ‘content_service’ and also for the div to go beneath the text. This will allow for the div’s BG image to go below the text as well. Every time I try to change ‘content’ to ‘content_service’ and change the attributes, it’s pushing the right divs under. I think it has something to do with my Clear’s but I can’t figure out what. Any help would be greatly appreciated. Thank you. Below is html and css files:

http://www.pmsidirect.com/fulfillment_mcm2.html

http://pmsidirect.com/mcm.css

2

It is just an overseen conflict with a later in code ruleset using that very selector, seemingly obsolete with its rules copied to “content_right”:


#content_right {
	height: 500px;
	width: 550px;
	float: left;
	padding: 5px;
	margin: 5px;
	clear: none;
}[COLOR="Red"]
#content_service {
	height: 500px;
	width: 550px;
	float: left;
	padding: 5px;
	margin: 5px;
	clear: none;
}[/COLOR]
3

I am looking to have the div titled ‘content’ changed to ‘content_service’ and also for the div to go beneath the text.

This makes no sense. The div called “content” is wrapping everything, including the text. How can you be underneath something that’s inside you?

But if you want the background image to include your two columns, that’s pretty normal: your columns are floated, and their parent, content, isn’t enclosing them. Which is normal.

Remove the height: 500px from content and give it instead “overflow: hidden”. Hiding overflow means the box must look to see IF anyone is overflowing (your floats are) so it will grow to enclose them like it would with ordinary, non-floated elements. If you want to move the background image down, instead of “center center” like you have now in your CSS, change that to “center bottom” if you like.

But if you keep the height, then the bottoms of your floats will be cut off… because they’ll be overflowing the 500px-high container, and like the name says, overflow will be hidden. Don’t combine overflow: hidden with a height.

Then in your HTML change the name “content” to whatever you want, and make the same change in your CSS.