Float Problems with Images.

[MinusMyThoughts]

The best way I can explain what's happening is to show everyone, I suppose:My working siteBeta Site is breaking in FF and Safari on Mac. It works in Opera, though.What I'm attempting to figure out is what attribute will force my container div (<div id=body>) to adjust its height to encompass the image i've aligned to the right in the display paragraph...Here's an HTML snippet:

<div id="body">	<div id="email">	</div>	<div id="content">		<p id="layoutTitle">Welcome to MikeYuhaniak.com!</p>		<p id="layoutTextarea">								<img id="layoutImage" src="images/userPics/Home6.jpg?78" align="right">This page is currently 			under construction. Please check back soon for updates.			<br>			<br>			Posted 03/09/07		</p>	</div></div>

And here's my CSS:

body	{	background-color: #000000;	margin:0px;	padding:0px;	text-align: center;	color:#000000;	font: garamond, serif;	}#master	{	background-color: #000000;	width: 945px;	margin: 0px auto;	padding:0px;	}#header	{	background: url('../images/MY_header.jpg');	width:945px;	height:202px;	margin:0px;	padding:0px;	}#menu	{	margin:0px;	padding-top:170px;	font-size:125%;	}#body	{	width:871px;	height:auto;	margin-left:39px;	padding-top:10px;	padding-bottom:10px;	background:#CCCCFF;	}#email	{	background: url('../images/MY_newsletter.jpg');	width:206px;	height:191px;	float:left;	}#content	{	width:660px;	margin-left:211px;	text-align:justify;	}#footer	{	background: url('../images/MY_footer.jpg');	width:945px;	height:49px;	margin:0px;	clear:both;	}#footertext	{	color:#FFFFFF;	font-size:80%;	padding-top:18px;	margin:0px;	}/* Layout rules */#layoutTitle	{	margin:0;	font:150% bold;	}#layoutInput	{	margin:0;	font:110%;	}#layoutImage	{	margin:0;	padding:5px;	}#layoutTextarea	{	margin:0;	padding:5px;	}

Thanks to anyone who has some suggestions!-Jason

[MinusMyThoughts]

I fudged it using a min-height:360px; setting for my container div.I know there's got to be a better way to do this, so I'd love any ideas. Thanks!-Jason

[jesh]

Have you tried adding a clear? Something like this:

<div id="body">	<div id="email">	</div>	<div id="content">		<p id="layoutTitle">Welcome to MikeYuhaniak.com!</p>		<p id="layoutTextarea">								<img id="layoutImage" src="images/userPics/Home6.jpg?78" align="right">This page is currently			under construction. Please check back soon for updates.			<br style="clear: right;">			<br>			Posted 03/09/07		</p>	</div></div>

When you float content, you have to clear the float later on or else the containing element won't expand to encompass the floated content.

[MinusMyThoughts]

And a whole new era of CSS begins for me...I thought a clear could only be declared in the CSS as an attribute (i.e. clear:both;).I'll give it a shot. Thanks so much!-Jason

[jlhaslip]

I would kill that id=body. The Body is already declared as the html body element. Might avoid a difficulty or two along the way. Rename it "wrapper" or 'container" or "kerfluffle", doesn't matter exactly...

[croatiankid]

DIVs automatically change their height to fit the content it contains. Try getting rid of the min-height and adding display:block to the image in the div. IDK if you know this but IMG is inline by default, so it leaves line space below it for letters like j,q,p etc. When you display it as a block-level element, it doesn't leave any extra space.

[ste]

min-height isnt widely supported anyway

[MinusMyThoughts]

What doesn't support it? I'm testing with FF, Safari, and Opera on Mac, plus IE6, Opera, and FF on PC. It works on all of them...<br style="clear: right;"> worked wonderfully. Thanks!-Jason

[jlhaslip]

Does this help at all?http://jlhaslip.trap17.com/samples/image_display/

[croatiankid]

Although this has been resolved, just wanted to ammend my previous post. Since your IMG is floated, it's automatically set to display:block.

[jesh]

<br style="clear: right;"> worked wonderfully. Thanks!

No problem. It took me awhile to figure out all that float/clear and block/inline stuff. Glad I could finally help someone else with it.

[ste]

What doesn't support it? I'm testing with FF, Safari, and Opera on Mac, plus IE6, Opera, and FF on PC. It works on all of them...

IE6 only supports min-height for th, tr, and td, not for divs or other elements.

"With Internet Explorer 6, this property applies only to td, th and tr elements in fixed-layout tables."

source: http://msdn.microsoft.com/workshop/author/...s/minheight.asp