Greetings,
I've been playing with CSS inline floats of <span> elements and the
results are not quite what I would expect. In the example attached
at the end of this post, I would expect the floated span 2 to be
on the same line as span 1, but instead it is on the same line
as span 3, which is on the line below span 1. Eric Meyer's CSS
pocket reference gives a clue as to why this is so: "A floated
element will generate a block-level box no matter what kind
of element it may be". Thus, my floated spans are "elevated"
to block level status and are therefore not placed on the same
line in which they are declared.
Now, I can compensate for this by using a negative top margin
equal in magnitude to the line-height as is done with span 2b
in the example below.
My questions are:
1. Is my method of getting the floated span on the same
line reliable under major recent 6th generation browsers
(all my tests so far were done under Firefox).
2. Is there a better way to get an inline element against the
right/let side of the paragraph containing a line, such as
when placing a hyperlink box to the right of a line of text
that describes and points to it?
Thanks in advance,
Mike Shell
------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Floated Element Height Test</title>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"></meta>
<style type="text/css">
body {line-height:1.25em;}
span {margin:0em; padding:0em; border:1px solid red;}
</style>
</head>
<body>
<p>
Body has a line-height (leading) of 1.25em.
</p>
<hr></hr>
<p>
<span>Span 1</span>
<span style="float:right;">Right Floated Span 2</span>
<br/>
<span>Span 3</span>
</p>
<hr></hr>
<hr></hr>
<p>
<span>Span 1b</span>
<span style="float:right; margin-top:-1.25em;">Right
Floated Span 2b with -1.25em top margin</span>
<br/>
<span>Span 3b</span>
</p>
<hr></hr>
</body>
</html>
------
