Margin/Padding & Text Wrap Issues from a CSS Newbie

[rexolio2008]

Okay, so you guys helped me big time the other day. I'm getting the padding and margin stuff down, but still having some issues.

Specifically, I can't figure out why some of my text which should be appearing underneath "Read Us Online" is appearing behind the ad space place-holder on the next row down. Also, my spacing around some dividers (at the very bottom of the page) do not look right.

What am I missing?

http://71.43.125.170/sites/bct/index2.html

Thanks - I've learned so much already! I appreciate everyone's time!

 

[Vragabond]

You're using height for most of your elements. You have to understand that height will be completely obeyed by all modern browsers. That means that the elements will be exactly as high as you state. If there is less content in them, there will be white space. If there is more content, the content will spill out (you can then decide what to do with the spilled content via the overflow property). If you wish to have elements that are at least certain value in height, use min-height (if you need to suppport IE6, then add height specifically just for that browser), and if you just need flowing text, omit the heights, allowing containers to grow to the size of their content.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[rexolio2008]

Vragabond,

I thought about this, but the text in that div is the same text that's in the div just to the left of it "Come as you are..."

The #cloud-body and #text1-body have the same amount of text, are at the same heights, and #text1-body even has more space in width, so the fact that the text is dropping down doesn't make sense to me.

 

[rexolio2008]

Here's the CSS for that entire row (#cloud-body, #text1-body and the ad):

#content #row2 {
		clear:left;
		float:left;
		width:650px;
		height:250px;
		margin-bottom:15px;
	}
		
		
		#row2 #cloud-head {
			float:left;
			width:292px;
			height:30px;
			margin:0px 15px 5px 0px;
			background-image:url('../images/bg-header.gif');
			background-repeat:repeat-x;
			padding:4px 4px 0px 4px;
			font-size:16px;
			font-weight:bold;
			color:#007681;
		}
		
		#row2 #text1-head {
			float:left;
			width:327px;
			height:30px;
			margin-bottom:5px;
			background-image:url('../images/bg-header.gif');
			background-repeat:repeat-x;
			padding:4px 4px 0px 4px;
			font-size:16px;
			font-weight:bold;
			color:#007681;
		}
		
		#row2 #cloud-body {
			clear:left;
			width:292px;
			height:215px;
			padding:0px 4px;
			overflow:hidden;
		}
		
		#row2 #text1-body {
			clear:left;
			width:327px;
			height:215px;
			padding:0px 4px;
			overflow:hidden;
		}
		
	#content #midad1 {
		float:right;
		width:300;
		height:250px;
		margin-left:15px;
	}

And here's the HTML:

			<div id="row2">
				<div id="cloud-head">Popular Serices...</div>

				<div id="text1-head">Read Us Online...</div>
				<div id="cloud-body">Come as you are as you were as you wanted to be. Come as a friend, as a friend, as a mwah mwahmoweyyyyy, yeah.</div>
				<div id="text1-body">Come as you are as you were as you wanted to be. Come as a friend, as a friend, as a mwah mwahmoweyyyyy, yeah.</div>				
			</div>
			<div id="midad1"><a href="#"><img src="ads/temp300x250.gif" border="0" width="300" height="250" alt="" /></a></div>

 

[rexolio2008]

I'm a doofus... I had a clear:left; in #text1-body. No wonder!

Sorry for wasting everyone's time!