Image Left, Text Right No Wrap.

[Guest Methuzala]

I'm hoping someone will have a solid answer for this one. I've scoured the "intraweb" looking for a decent, solid, CSS2.1, future-proof answer and have only come up with 1 that might work...THE BACKGROUND:I am creating some FCK templates for use in DNN projects for my clients (as clients don't know anything about html markup, its good to have these, as they just select a layout from the "Templates" dropdown). I have a couple of good CSS2.1 Table-Based Layouts (I know, I know), but as my newer projects are DIV-Based, I'm working on a set of DIV templates...THE QUESTION:Does anyone know how to style a div layout, with an image on the left, and text to the right - BUT the text must not wrap below the image? (i.e. Image Left, Text Right - NO Text Wrap).PLEASE NOTE: As these are templates and clients will be replacing placeholder images with their own images, the images <img> or CSS cannot have set widths nor set margins. We need to make way for a multitude of widths here. There's no problem in doing this when you know the width of the image. That's simple.The best I have come up with thus far is the following:

	/* ========= */	/* THE CSS   */	/* ========= */	.divcontent {	}	.divcontent img {		float: left;		margin: 0px 20px 0px 0px;	}	.divcontent_text {		overflow: auto;	}	/* ============ */	/* THE LAYOUT   */	/* ============ */	<div class="divcontent">		<img height="180" width="200" src="" alt="Placeholder" />		<div class="divcontent_text">			<h1>H1 Header goes here.</h1>			<p>Your text goes here... Lorem ipsum dolor sit amet, consectetur adipisicing			elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi			ut aliquip ex ea commodo consequat.</p>		</div>	</div>	<div style="clear: both;">	</div>

The "overflow: auto" for the text div works in FF3+, IE7, Chrome, Opera and Safari browsers. It doesn't however work in IE6. I'm also not sure if this solution is not just some sort of CSS hack, as one would ordinarly use the "overflow: auto" style when you require scroll bars on a set width or height. As the sizes for the div are not defined, this seems to work...I'm sure there must be a better way than this. My cocern is that its not future-proof, and not the correct way of doing this. Plus, it needs to work in IE6.Any suggestions / answers will be appreciated.ThanksJon

[Jerry62704]

I'm hoping someone will have a solid answer for this one. I've scoured the "intraweb" looking for a decent, solid, CSS2.1, future-proof answer and have only come up with 1 that might work...THE BACKGROUND:I am creating some FCK templates for use in DNN projects for my clients (as clients don't know anything about html markup, its good to have these, as they just select a layout from the "Templates" dropdown). I have a couple of good CSS2.1 Table-Based Layouts (I know, I know), but as my newer projects are DIV-Based, I'm working on a set of DIV templates...THE QUESTION:Does anyone know how to style a div layout, with an image on the left, and text to the right - BUT the text must not wrap below the image? (i.e. Image Left, Text Right - NO Text Wrap).PLEASE NOTE: As these are templates and clients will be replacing placeholder images with their own images, the images <img> or CSS cannot have set widths nor set margins. We need to make way for a multitude of widths here. There's no problem in doing this when you know the width of the image. That's simple.Any suggestions / answers will be appreciated.ThanksJon

Two divs, one floated left, one not, but with a margin equal to the width of the floated one.