float: right

[Oliver Block]

Hello everybody,

I wonder why a

<span style="float:right">some text</span>

might be displayed out of a surrounding div element. It is shifted to the
next line.

I thougt it is supposed to appear inside the surrounding div. There is
definetly enough space.

tia,

Oliver

[boclair]

Oliver Block wrote:

Hello everybody,

I wonder why a

<span style="float:right">some text</span>

might be displayed out of a surrounding div element. It is shifted to the
next line.

I thougt it is supposed to appear inside the surrounding div. There is
definetly enough space.

tia,

Oliver

Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

<div>Here is a bunch of text<span
style="float:right;color:#f00;width:50px;">floated text</span> but some
text has been floated right that goes on and on that goes on and on that
goes on and on that goes on and on that goes on and on that goes on and
on that goes on and on that goes on and on that goes on and on that goes
on and on that goes on and on that goes on and on that goes on and on
that goes on and on that goes on and on that goes on and on that goes on
and on that goes on and on that goes on and on that goes on and on that
goes on and on that goes on and on that goes on and on that goes on and
on that goes on and on that goes on and on that goes on and on that goes
on and on
</div>

Now shift the <span> object to the start of the div content.

Louise

[Oliver Block]

boclair wrote:

I thougt it is supposed to appear inside the surrounding div. There is
definetly enough space.

Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

Why is that? I changed

<div style="width:100%"><a href="prev.html">prev</a><span
style="float:right;"><a href="next.html">next</a></span></div>

to:

<div style="width:100%"><span style="float:right;">
<a href="next.html">next</a></span><a href="prev.html">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with Konqueror
(KDE) when I tried your code.

Thanks,

Oliver

[Neredbojias]

To further the education of mankind, Oliver Block
<ne********@block-online.eu> vouchsafed:

boclair wrote:

I thougt it is supposed to appear inside the surrounding div. There
is definetly enough space.

Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

Why is that? I changed

<div style="width:100%"><a href="prev.html">prev</a><span
style="float:right;"><a href="next.html">next</a></span></div>

to:

<div style="width:100%"><span style="float:right;">
<a href="next.html">next</a></span><a href="prev.html">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with
Konqueror (KDE) when I tried your code.

In the first case you're floating (right) around nothing. In the second,
you're floating around the "prev" link.

--
Neredbojias
Infinity has its limits.

[Jim Moe]

Oliver Block wrote:

<div style="width:100%"><span style="float:right;">
<a href="next.html">next</a></span><a href="prev.html">prev</a></div>

There is enough room!?

Try this:
#pager {
padding: 0.5em;
margin: 1em auto;
border: 1px solid red;
width: 90%;
}

<div id="pager">
<span style="float:right;"><a href="next.html">next</a></span>
<a href="prev.html">prev</a>
</div>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[boclair]

Neredbojias wrote:

To further the education of mankind, Oliver Block
<ne********@block-online.eu> vouchsafed:

boclair wrote:

I thougt it is supposed to appear inside the surrounding div. There
is definetly enough space.
Not true. You did not have sufficient content in the div. Without
commenting on your method, try this

Why is that? I changed

<div style="width:100%"><a href="prev.html">prev</a><span
style="float:right;"><a href="next.html">next</a></span></div>

to:

<div style="width:100%"><span style="float:right;">
<a href="next.html">next</a></span><a href="prev.html">prev</a></div>

There is enough room!?

May that be a specialty of firefox? I did get no difference with
Konqueror (KDE) when I tried your code.

In the first case you're floating (right) around nothing. In the second,
you're floating around the "prev" link.

Exactly. Floats are declared before the object that they are floated
around in the general case. Mozilla renders correctly and is not the
special case.

Having a width rule on a float set is good! practise.

Since the reason why is asked perhaps look at this.

_____start_____

<!-- left floated div -->
<div style="float:left;width:4em;border:1px solid #000;">left text</div>

<!-- right floated div -->
<div style="float:right;width:4em;text-align:right;border:1px solid
#000;">right text</div>

<!-- div in flow -->
<div style="width:4em;margin:auto;text-align:center;border:1px solid
#000;">centre text</div>

_____end________

and see http://www.w3.org/TR/REC-CSS2/visuren.html#floats and the Meyer
test suites at http://www.meyerweb.com/eric/css/tes...ec09-05-01.htm

Louise