Float left, word wrap not working as expected

HTML & CSS
1

Okay have spent some time on this, tried various approaches but can’t get it to work. Probably a real obvious issue but am at the stage of not seeing the forest for the trees :nono:


<div>
  	
		<h2>Review</h2>
		<img src="./stills/13gantryrow.jpg" class="floatleft" />		<p class="data_display">
			"Have you been talking behind my back?" - Paul		</p>
		<p class='data_display'>
<em>Gantry</em> is a made for TV movie that transcends it's medium to deliver quite an outstandingly good movie for those not wanting a high level of
gore in their horror diets.  Primarily a haunted house epic, the movie also dials into some possession and Psycho themes as it unfolds. The DVD has
been released but you may have to hunt around the bargain bins to locate a copy.
</p>
<p class='data_display'>
Julie and Peter buy into an inner city apartment that they really can't afford, but who cares with those harbour views. They are both highly successful in their own fields and you can readily believe there would be no issue about getting the purchase money. Our yuppie couple set about renovating an absolute charmer of a place full of character and secret nooks and crannies.
</p>
<p class='data_display'>
Peter maybe should have taken note of that sudden gust of wind and the face he saw in a mirror before making the investment. But then he doesn't look like the type to check out <I>The Amityville Horror</I> and other helpful home purchase guides. He starts having nightmares about a murder that took place in the 1800s in Sydney Town, right about where the new house is located.
</p>

The image is displaying correctly, and the first paragraph is spot on, to the right of the image. However the second two paragraphs are appearing below the image rather than next to it. Have slotted in multiple “data_display” to ensure that’s not the problem. Actually looking at it my parser has interrupted [ i ] as < i > rather than < em > :blush:

Okay the css


img.floatleft {
	float: left;
	margin: 20px;
}

.review_display .data_display {
	position: relative;
	float: left;
	font-size: 1.2em;
}

.review_display p {
	position: relative;
	float: left;
	font-size: 1.2em;
}

Been torturing those classes to death.

The html/php


  	<div>
  	
		<h2>Review</h2>
		<?php echo('<img src="./stills/'.$rev_image.'" class="floatleft" />'); ?>
		<p class="data_display">
			<?php echo('"'.$rev_quote.'" - '.$rev_character); ?>
		</p>
		<?php echo($rev_review); ?>
<!--	<h1>Scaryminds Rates This Movie As...</h1>
	<p>
		<span class="data_display"><?php echo($rev_rating.'&nbsp;&nbsp'.$rev_final); ?>
	</p> -->
	</div>

Anyone have a notion of where I’ve gone wrong?

2

It’s hard to tell from what you’ve posted. All I can suggest is that the margins are pushing the text away more than you like:

img.floatleft {
	float: left;
	[COLOR="#FF0000"]margin: 20px;[/COLOR]
}

What’s the size of the image?

A live link would make it easier to answer.

3

  1. Image size, 200px x 280px

  2. This is from our development server which isn’t hooked up to the interwebs :frowning:

4

There’s something else going on in your CSS that you haven’t posted, because the current code does just what you want:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

img.floatleft {
	float: left;
	margin: 20px;
}

.review_display .data_display {
	position: relative;
	float: left;
	font-size: 1.2em;
}

.review_display p {
	position: relative;
	float: left;
	font-size: 1.2em;
}

</style>
</head>
<body>

<div>
<h2>Review</h2>
<img src="./stills/13gantryrow.jpg" class="floatleft" width="200" height="280"/>		
<p class="data_display">"Have you been talking behind my back?" - Paul</p>
<p class='data_display'><em>Gantry</em> is a made for TV movie that transcends it's medium to deliver quite an outstandingly good movie for those not wanting a high level of 
gore in their horror diets.  Primarily a haunted house epic, the movie also dials into some possession and Psycho themes as it unfolds. The DVD has
been released but you may have to hunt around the bargain bins to locate a copy.
</p>
<p class='data_display'>
Julie and Peter buy into an inner city apartment that they really can't afford, but who cares with those harbour views. They are both highly successful in their own fields and you can readily believe there would be no issue about getting the purchase money. Our yuppie couple set about renovating an absolute charmer of a place full of character and secret nooks and crannies.
</p>
<p class='data_display'>
Peter maybe should have taken note of that sudden gust of wind and the face he saw in a mirror before making the investment. But then he doesn't look like the type to check out <I>The Amityville Horror</I> and other helpful home purchase guides. He starts having nightmares about a murder that took place in the 1800s in Sydney Town, right about where the new house is located. 
</p>

</body>
</html>
5

yes, there is relevant code here that’s not begin provided.

in your example:
.review_display .data_display {}
.review_display p {}

wouldn’t apply to anything as there is no parent container with class of “review_display”

do note, however, that both the above rules have a “float:left;” which would cause elements ( such as Ps) to float side by side… UNLESS said elements were wider than the available window width. Since you haven’t declared any width to your elements then the width will be determine by their contents. That means that for short paragraphs, the element will float side by side but for long contents, the width will be essentially 100% and the element will drop.

hope that helps