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?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http//www.w3.org/TR/html4/strict.dtd">
<div style="width 100%; border-style dotted;">
<span style="float right;border-style dotted;">
<div style="width 100%;border-style dotted;">
Floating right adds extra line in Firefox/IE
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 )
Hey, I'm getting the hang of this css