Image/Text float/clear help?

Confused

Confused

Confused

Soldato
Joined
18 Oct 2002
Posts
8,016
Hi all,

Am having a bit of a fun issue, which I've spent nearly 8 hours looking at so far, and am getting quite frustrated!

Basically, I have a selection of images (screenshots), which I wish to have blocks of text next to.

The following is how it displays in IE6 (and is how I want it to look!)
ie6.jpg


The following is how it displays in Firefox/IE8 (and is not how I want it to look!)
firefox.jpg


CSS Snippets:
Code: 
img.small-img {
	float: left;
	margin: 0em 1em 1em 1em;
	padding: 0.5em;
	border: 1px solid #333;
	background-color: #fff;
}

.clearleft {
	clear: left;
}

HTML Snippets:
Code: 
<p>First line of text</p>
<p>Second line of text on it's own</p>
<img class="small-img clearleft" src=".jpg" />
<p>This line of text should be next to the first image</p>
<img class="small-img clearleft" src=".jpg" />
<p>This text should be next to the second image</p>
<p>This too, next to the 2nd image</p>
<img class="small-img clearleft" src=".jpg" />
<p>Another paragraph, next to the 3rd image this time</p>
<img class="small-img clearleft" src=".jpg" />
<p>Next to the 4th image</p>


I am, unfortunately, having to deal with mainly IE6 at a guess, but it needs to look right in both IE8/Firefox too, which currently, it doesn't!

Surely the clear: left; on the images *should* do the trick, from how I've interpreted it? Why isn't it working in Firefox/IE8?


Cheers!
 
Last edited:
clear is used to specify on which side other floated elements are not allowed so the above just isn't going to work.

either reorganise your html like so....
Code: 
<p class="clearleft"><img class="small-img" src=.jpg" />
This line of text should be next to the first image</p>

<p class="clearleft"><img class="small-img" src=".jpg" />
This text should be next to the second image</p>

Or drop them in a container div with overflow: hidden to contain the float.
 
You must log in or register to reply here.
Back
Top Bottom