newbie: header spanning two columns with left- and right-alignment

jkn wrote:

Hi Els

When you float something to the right, it does not magically go up one
line. To have it on the same line as other text, place the float
*before* the other text.

Hey, that works! on all the browsers I tried - thanks!

I'd like to understand this a bit more though - what is the 'marker'
that means that my original text had a line break (or equivalent) after
the left aligned words? You say 'it doesn't go up one line' - what I
don't understand is why it starts off one line below. From what I
understand of this area (could well be wrong!), the behaviour seems as
though my two bits of text were separate 'display: block' sections.
'How come' - is what I'm asking, I think.

Could this behaviour have something to do with the fact that you've
turned the <span> into a block level element?

<h*> elements are only suppose to contain inline elements:

http://www.w3.org/TR/html4/struct/global.html#edef-H1

so I think maybe Firefox is assuming a missing </h1> tag and then
putting the span on the next line (because <h1> is block).

if there was better support for display:inline-block; this would all be
a lot easier.

To get the effect something like this would work:


..left_aligned {display:inline; float:left;}
..right_aligned {display:inline; float:right;}


<h1 class="normal">left hand text</h1>
<h1 class="right_aligned">right hand text</h1>

Although this isn't going to work out very well for people with text
browsers or people who have their user-stylesheet overriding the author's.

Ho-hum!

--
Brian O'Connor (ironcorona)

ironcorona wrote:

.left_aligned {display:inline; float:left;}
.right_aligned {display:inline; float:right;}


h1 class="normal">left hand text</h1
h1 class="right_aligned">right hand text</h1

Sorry. Clearly I meant:

..left_aligned {display:inline; float:left;}
..right_aligned {display:inline; float:right;}

<h1 class="left_aligned">left hand text</h1>
<h1 class="right_aligned">right hand text</h1>


--
Brian O'Connor (ironcorona)

ironcorona wrote:

jkn wrote:
Hi Els

When you float something to the right, it does not magically go up one
line. To have it on the same line as other text, place the float
*before* the other text.

Hey, that works! on all the browsers I tried - thanks!

I'd like to understand this a bit more though - what is the 'marker'
that means that my original text had a line break (or equivalent) after
the left aligned words? You say 'it doesn't go up one line' - what I
don't understand is why it starts off one line below. From what I
understand of this area (could well be wrong!), the behaviour seems as
though my two bits of text were separate 'display: block' sections.
'How come' - is what I'm asking, I think.

Well, according to this page on the specs:
http://www.w3.org/TR/CSS21/visuren.html#float-position
IE and Firefox are doing it wrong.

Could this behaviour have something to do with the fact that you've
turned the <span> into a block level element?

h*> elements are only suppose to contain inline elements:

http://www.w3.org/TR/html4/struct/global.html#edef-H1

so I think maybe Firefox is assuming a missing </h1> tag and then
putting the span on the next line (because <h1> is block).

No, in HTML, <span> is inline, so there is no </h1> missing.

if there was better support for display:inline-block; this would all be
a lot easier.

Wouldn't help in this particular case though.

To get the effect something like this would work:

.left_aligned {display:inline; float:left;}
.right_aligned {display:inline; float:right;}

h1 class="left_aligned">left hand text</h1
(the above line edited as per your next post ;-) )
h1 class="right_aligned">right hand text</h1

This will work, because the right-floated text is not part of the
first <h1> now. The display:inline is entirely superfluous there btw;
as soon as you float an element, it becomes block level.
(see the same url as mentioned above)

Anyway, as to why Firefox and IE don't float the <span> to the right
of the rest of the <h1>: I've just tested it with borders on, which
shows that the <h1> is just taking up full width, so I assume Firefox
and IE take the floated bit as "moved out" from its original place.

Not correct according to the CSS2.1 specs afaics, and it seems only
Opera gets it right. (that is, of the 3 browsers I tested it in)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Terence Trent d'Arby - Dance Little Sister

On Wed, 17 May 2006 21:15:06 +0200, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Barbara de Zoete wrote:

#Header span {display: block; float: right;}

div id="Header"
My Site Name<span>My Right-aligned text</span
/div

With FF I'm seeing what I was seeing on
my page - the 'right aligned text' is outside the red border, on the
line below.

So am I
encountering a bug in Firefox?

Could be. I don't know actually. And I don't know my way around bugs and
bug reports either. Maybe another poster.

Somebody?

When you float something to the right, it does not magically go up one
line. To have it on the same line as other text, place the float
*before* the other text.

<drums>
Els to the rescue!
</drums>

You're right of course. I don't know why I missed that. Thanks Els.



--
______PretLetters:

weblog | http://www.pretletters.net/weblog/weblog.html |
webontwerp | http://www.pretletters.net/html/webontwerp.html |
zweefvliegen | http://www.pretletters.net/html/vliegen.html |

Barbara de Zoete wrote:

On Wed, 17 May 2006 21:15:06 +0200, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Barbara de Zoete wrote:

#Header span {display: block; float: right;}

div id="Header"
My Site Name<span>My Right-aligned text</span
/div

With FF I'm seeing what I was seeing on
my page - the 'right aligned text' is outside the red border, on the
line below.

So am I
encountering a bug in Firefox?

Could be. I don't know actually. And I don't know my way around bugs and
bug reports either. Maybe another poster.

Somebody?

When you float something to the right, it does not magically go up one
line. To have it on the same line as other text, place the float
*before* the other text.

drums
Els to the rescue!
/drums

You're right of course. I don't know why I missed that. Thanks Els.

Well, it was apparently based on past experience, not on the specs, as
you'll see in my other post (reply to ironcorona)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: 2 Unlimited - Sensuality

Els wrote:

Well, according to this page on the specs:
http://www.w3.org/TR/CSS21/visuren.html#float-position
IE and Firefox are doing it wrong.

Could this behaviour have something to do with the fact that you've
turned the <span> into a block level element?

h*> elements are only suppose to contain inline elements:

http://www.w3.org/TR/html4/struct/global.html#edef-H1

so I think maybe Firefox is assuming a missing </h1> tag and then
putting the span on the next line (because <h1> is block).

No, in HTML, <span> is inline, so there is no </h1> missing.

But didn't you just set #Header span {display: block; float: right;} or
am I not keeping up?

To get the effect something like this would work:

.left_aligned {display:inline; float:left;}
.right_aligned {display:inline; float:right;}

h1 class="left_aligned">left hand text</h1
(the above line edited as per your next post ;-) )
h1 class="right_aligned">right hand text</h1

This will work, because the right-floated text is not part of the
first <h1> now. The display:inline is entirely superfluous there btw;
as soon as you float an element, it becomes block level.
(see the same url as mentioned above)

Oh, you're right of course. As you saw from my mess up I was trying
another solution but changed it. And left some of the wrong stuff.

[snip]

Not correct according to the CSS2.1 specs afaics, and it seems only
Opera gets it right. (that is, of the 3 browsers I tested it in)

Damned Opera and their sticking to the standard

--
Brian O'Connor (ironcorona)

ironcorona wrote:

Els wrote:

so I think maybe Firefox is assuming a missing </h1> tag and then
putting the span on the next line (because <h1> is block).

No, in HTML, <span> is inline, so there is no </h1> missing.

But didn't you just set #Header span {display: block; float: right;} or
am I not keeping up?

That is CSS. You assign display:block to an inline element. A browser
will only assume closing tags missing if the HTML is wrong.
HTML rule: inline elements (and a couple of block elements like h1 and
p) can't hold block elements.
CSS practice: assign inline or block to any block or inline element
and get away with it ;-)

[snip]

Not correct according to the CSS2.1 specs afaics, and it seems only
Opera gets it right. (that is, of the 3 browsers I tested it in)

Damned Opera and their sticking to the standard

<g>

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Soul Asylum - April Fool

On Thu, 18 May 2006 08:47:16 +0200, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

[ float:right; Moves outside a parent block level element in FF ]

drums
Els to the rescue!
/drums

You're right of course. I don't know why I missed that. Thanks Els.

Well, it was apparently based on past experience, not on the specs, as
you'll see in my other post (reply to ironcorona)

I remember that too, but only now that you've mentioned it. I remember
struggling with it and finally just letting the float be the first thing
inside its parent. Not really understanding why it worked one way and not
the other, because it should have no effect really, being first or last
thing inside the parent if you're floated.


--
______PretLetters:

weblog | http://www.pretletters.net/weblog/weblog.html |
webontwerp | http://www.pretletters.net/html/webontwerp.html |
zweefvliegen | http://www.pretletters.net/html/vliegen.html |

Els wrote:

so I think maybe Firefox is assuming a missing </h1> tag and then
putting the span on the next line (because <h1> is block).
No, in HTML, <span> is inline, so there is no </h1> missing.
But didn't you just set #Header span {display: block; float: right;} or
am I not keeping up?

That is CSS. You assign display:block to an inline element. A browser
will only assume closing tags missing if the HTML is wrong.
HTML rule: inline elements (and a couple of block elements like h1 and
p) can't hold block elements.
CSS practice: assign inline or block to any block or inline element
and get away with it ;-)

Okay, I think I'm with you now. I assumed that if you had something like

<p><span></span></p>

and you set

span {display:block;}

that the browser would treat it exactly as if it were something like

<p><div></div></p>

and thus illegal because <p> contains a block element.

But that's not how it works?


--
Brian O'Connor (ironcorona)

ironcorona wrote:

HTML rule: inline elements (and a couple of block elements like h1 and
p) can't hold block elements.
CSS practice: assign inline or block to any block or inline element
and get away with it ;-)

Okay, I think I'm with you now. I assumed that if you had something like

p><span></span></p

and you set

span {display:block;}

that the browser would treat it exactly as if it were something like

p><div></div></p

and thus illegal because <p> contains a block element.

But that's not how it works?

Indeed :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Yes - Yours Is No Disgrace