Basic float/clear question

rawling · #1 (**permalink**) Jul 18th, 2007, 15:04

Hi,

I have what I am sure is a very basic CSS float/clear question, but the float guides I've found don't seem to address it.

OK, I have two types of elements. Images (made block-level) that are set to both float and clear right, and paragraphs that are set neither to float nor clear.
These occur in the order:

Image
Paragraph
Image
Paragraph

Now, when the paragraphs are big enough, I get what I expected: two paragraphs of text, each wrapping around an image in their top-right corner.

However, if the first paragraph shrinks, IE6 (compliant mode) and FF (ditto) give me two different behaviours and I'm not sure which is right.

In IE, the top of the second paragraph remains in line with the top of the second image, even when this results in whitespace between the bottom of the first paragraph and the top of the second paragraph (because the first image is "taller" than the first paragraph"
In FF, the second paragraph wraps up past the first image as well as the second - so the top of the second image and the second paragraph no longer line up.

The question is - which one of these is correct? By "clearing" the second image on the right, should browsers implicitly be clearing following non-floated content, as IE seems to be, or not, as with FF?

I actually WANT the IE behaviour. But first off, I want to make IE compliant, and THEN make both IE and FF do what I want.

Any tips?

EDIT: Here's a fixed-width approximation to the discrepancy:

"Big enough" paragraphs

Code: Select all

######## 00000000
######## 00000000
######## 00000000
#################
#################
 
######## 00000000
######## 00000000
######## 00000000
#################
#################

First para too small: IE

Code: Select all

######## 00000000
         00000000
         00000000
 
######## 00000000
######## 00000000
######## 00000000
#################
#################

First para too small: FF

Code: Select all

######## 00000000
         00000000
######## 00000000
########
######## 00000000
######## 00000000
         00000000

EDIT 2: Here's some html/css combined to demonstrate:

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <body>
    <img src="test.jpg" style="float: right" height=100px width=100px />
    <p>This paragraph flows after the first image.</p>
    <img src="test.jpg" style="float: right; clear: right" height=100px width=100px />
    <p>This paragraph flows after the second image.</p>
  </body>
</html>

matelot · #2 (**permalink**) Jul 18th, 2007, 18:56

1. Do a Google search for 'text wrap + images'. There are various tutorials available for styling images and text.

2. I had success putting each image into a separate div; in each div float the image right (or left). The flow of the divs will mean that each div should line up vertically (as your diagram), but the images will be floated right. You don't need anything cleared right.

The problem seems to be your in-line styling; two images and two text paras fighting for position.

Hope that helps.

rawling · #3 (**permalink**) Jul 18th, 2007, 19:16

Hi,

thanks for the reply - despite the question, I am quite adept at CSS, and can easily force FF to display the IE way.

However, I'm curious as to which was is technically -right-, and whether there's a "trick" to making IE get into line if it's wrong (like the hasLayout property is a trick for some other stuff).

Lchad · #4 (**permalink**) Jul 18th, 2007, 19:52

My guess is FF is right... at least that's my theory. FF is usually correct versus IE's chicken soup.

pa007 · #5 (**permalink**) Jul 19th, 2007, 08:52

I don't like IE hacks. I'd rather just send it its own stylesheet. Makes life a lot easier. You gotta love those MS Developers for making our lives easier with Conditional Comments

.

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
A couple of basic question- please.	dhall	Starting Out	7	Aug 17th, 2007 18:41
Basic JS question	klonopin	JavaScript Forum	1	Mar 15th, 2007 00:31
float question...	asa_carter	Web Page Design	4	Aug 27th, 2006 00:18
Probably very basic CSS question	JonRouston	Web Page Design	3	May 18th, 2006 12:08
Basic XML question	fogofogo	Other Programming Languages	2	Nov 23rd, 2005 08:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Basic float/clear question