inline float right, but not down?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Michael Shell - 27 Jun 2005 11:06 GMT

Greetings,

I've been playing with CSS inline floats of 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>

Body has a line-height (leading) of 1.25em.

<hr></hr>

Span 1
Right Floated Span 2
 
Span 3

<hr></hr>

<hr></hr>

Span 1b
Right
Floated Span 2b with -1.25em top margin
 
Span 3b

<hr></hr>

</body>
</html>

------

Reply to this Message

Els - 27 Jun 2005 11:37 GMT

> Greetings,
>
[quoted text clipped - 8 lines]
> to block level status and are therefore not placed on the same
> line in which they are declared.

Correct.

> 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.

No need.

> 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?

Place the float before the rest of the text that you want on the same
line.

Instead of this:

Span 1
Right Floated Span 2
 
Span 3

write this:

Right Floated Span 2
Span 1
 
Span 3

Signature

Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Stranglers - All Day And All Of The Night

Reply to this Message

Michael Shell - 28 Jun 2005 02:53 GMT

> Place the float before the rest of the text that you want on the same
> line.

Well, it makes me feel a bit like an idiot, but at least I got a good
answer. In my defense, this is very counter intuitive - I would have
thought that placing it first would have given me an additional
line break/space at the start of the structure. For the record,
display:inline will not help either.

Thank you for your help,

Mike

Reply to this Message

Els - 28 Jun 2005 08:03 GMT

>> Place the float before the rest of the text that you want on the same
>> line.
[quoted text clipped - 3 lines]
> thought that placing it first would have given me an additional
> line break/space at the start of the structure.

Depends how you think about it - I see the float as "shove this to one
side, and see how much will fit in the freed space".
A bit like organising the mess in the attic or garage ;-)

> For the record,
> display:inline will not help either.

Display:inline and float are mutually exclusive :-)

> Thank you for your help,

You're welcome.

Signature

Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2005

inline float right, but not down?