1 reply [Last post]
drift161
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2005-05-07
Posts: 1
Points: 0

I'm sure the answer to this already exists in the archive but I don't have the right words in my head to find it. Be much appreciated if someone could point me in the right direction.

As you can see the problems is that when the text wraps it moves it below the image.

both html and css validate
here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Eg1 Eg2</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body {	
	margin:50px;
	padding:0px;
	text-align:left;
	background-color:#000;
	}

#fullbodytext {
	font-family: Tahoma, sans-serif;
	color: #000;
	text-align:justify;
	padding:2px 30px 2px 30px;
	background-color:#fff;
	}

.downloaditem{
	width:80%;
	float:left;
	margin:10px;
	padding:10px;
	background-color:#eee;
	}

.downloadimage{
	float:left; 
	border:solid 1px;
	padding:2px;
	background-color:#fff;
	}

.downloadtitle{
	color:#a00;
	font-family: verdana, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	padding-bottom:5px;
	}

.downloadtext{
	float:left;
	padding:10px;
	}

</style>
</head>
<body>
<div id="fullbodytext">

<div class="downloaditem">
	<div class="downloadimage"><img src="test.gif" ALT="test.gif"></div>
	<div class="downloadtext">
		<div class="downloadtitle">Example 1</div>
			blah blah blah blah blah blah blah blah blah blah
	</div>
</div>
<div style="clear:both;"></div>

<div class="downloaditem">
	<div class="downloadimage"><img src="test.gif" ALT="test.gif"></div>
	<div class="downloadtext">
		<div class="downloadtitle">Example 2</div>
		blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
	</div>
</div>
<div style="clear:both;"></div>

&nbsp;
</div>
<div style="clear:both;"></div>
</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

text wrapping stops text floating.

It's not clear what effect you would actually like to have, but the first thing to do is switch the page into 'Standards mode' with a dtd that has a url.

If you want the text to remain to the right of the image then you need to constrain it's width using margins if you want it to wrap around the image from the top then remove the float div on the text.

It would help you if you read up on the behavior of floats and IE bugs to get a clearer idea of whats happening.

http://web.archive.org/web/20040202075436/http://www.positioniseverything.net/articles/float-bugs-1.html

http://web.archive.org/web/20031207054833/http://www.positioniseverything.net/articles/float-theory.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me