1 reply [Last post]
SJB
Offline
newbie
Last seen: 17 years 21 weeks ago
Timezone: GMT+12
Joined: 2004-09-01
Posts: 1
Points: 0

Hi,
I have a problem with laying things out using CSS and using 'float right'. Basically Firefox and IE will position a floated block vertically lower than Safari or Opera. For an example see the HTML below. In Safari/Opera the top of the floated block containing the text 'rightblock' is positioned at the top of the block containing 'NavBlock', which is what I expected.
Firefox and IE, however, position it down by one line height of text.
Is this a bug in one or other of the browsers, or simply a different way of interpreting the spec?
How could I do this same thing and get the same result in all browsers?

HTML follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div style="width 100%; border-style dotted;">
NavBlock
<span style="float right;border-style dotted;">
rightfloat
</span>
</div>
<div style="width 100%;border-style dotted;">
MainBlock
</div>
<body>
</body>
</html>

Thanks.

chrispie
Offline
newbie
Last seen: 17 years 22 weeks ago
Joined: 2004-08-28
Posts: 4
Points: 0

Floating right adds extra line in Firefox/IE

Hi

The reason for this is that the normal way of handling this is (i.e the firefox/moz way) to wrap inline content (i.e. text) around it, and borders etc ignore it.

The usual (though hardly good) way to fix this is to add something like;

<div style="clear:both;"></div> after your right float, this will force the borders down around it (though I'm sure others will tell you about the :after method as well Wink)

Hey, I'm getting the hang of this css Smile

Chris