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

#1

Hello all
I'm a newbie to the world of CSS and this is likely to be a pretty
naive question.

I have a CSS file based on the 'blue robot' 2-column layout. This has a
header which 'spans' (in my terminology) both columns, done like this.
I've stripped out a couple of IE hacks for clarity:

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 2px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] +
[top and bottom border widths] */
height:35px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:#999999; /* black; */
border-width:1px 0px; /* top and bottom borders: 1px; left and right
borders: 0px */
voice-family:inherit;
height:14px; /* the correct height */
}

and I use this in this way:

<body>
<div id="Header">
My Website name
</div>
<div id="Content">
....

What I want now is to have two bits of text in my header; one
left-aligned (like the 'My Website Name' text above, and a second part
right-aligned. I tried to create another rule:

#Headerright {float: right} /* experiment! */

so that I could type

<div id="Header">
My Website name
<div id="Headerright">My right-aligned text</div>
</div>

and i've played around with various combinations of positions, margins
etc. within my new rule. I'm so far unable to get the right-aligned
text consistently aligned (vertically) at the same level as the left
text. I appreciate that I could do with understanding the CSS box model
better, but could someone point me to what I need to do to my rule to
get this working?

Specifically I think I need to understand the 'reference point' of my
'Headerright' div within my 'Header', and just what is inherited, etc.,
so any pointers to that kind of specific information would be great. so
far I'm swamped with references!

Thanks
jon N

#2

On Wed, 17 May 2006 19:06:53 +0200, jkn <jkn_gg (AT) nicorp (DOT) f9.co.uk> wrote:

Quote:

This has a
header which 'spans' (in my terminology) both columns
and I use this in this way:

body
div id="Header"
My Website name
/div

That's no good. It looks like a heading of the first level. Use that.
<h1>My Website name</h1>

Quote:

What I want now is to have two bits of text in my header; one
left-aligned (like the 'My Website Name' text above, and a second part
right-aligned.

<h1>My Website name <span>right-aligned bit of text</span></h1>

h1 {
/* the looks you created for the div#header previously
don't make it overly complicated though */
}

h1 span {
display:block;
float:right; }

--
______PretLetters:

Quote:

#3

Hi Barbara,
Thanks for your reply:

[...]

Quote:

body
div id="Header"
My Website name
/div

That's no good. It looks like a heading of the first level. Use that.
h1>My Website name</h1

I assume by 'no good' you mean stylistically rather than syntactically?

I do actually use h1 elsewhere, so I'll leave this alone for now. I
agree that it could be clearer and I may tidy this up later.

Quote:

What I want now is to have two bits of text in my header; one
left-aligned (like the 'My Website Name' text above, and a second part
right-aligned.

h1>My Website name <span>right-aligned bit of text</span></h1

h1 {
/* the looks you created for the div#header previously
don't make it overly complicated though */
}

h1 span {
display:block;
float:right; }

I tried this, in my form:

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

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

And got what I was seeing before - the right-aligned text appears to
the right, as desired, but around a line below the text at the left.
It's this I'm trying to correct.

I'm using firefox 1.5 BTW.

Thanks
Jon N

#4

On Wed, 17 May 2006 20:08:13 +0200, jkn <jkn_gg (AT) nicorp (DOT) f9.co.uk> wrote:

Quote:

That's no good. It looks like a heading of the first level. Use that.
h1>My Website name</h1

I assume by 'no good' you mean stylistically rather than syntactically?
I do actually use h1 elsewhere,

Okay. I didn't know that because I didn't get the whole page. Tip for the
future: best upload your test page and provide a URL. The reason for
advising to use the heading h1 was that I prefer meaningful markup over
divisions and spans.

Quote:

I tried this, in my form:

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

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

Please use a space before the span, so people with browsers without CSS
don't get
'My Site NameMy Right-aligned text'

Quote:

And got what I was seeing before - the right-aligned text appears to
the right, as desired, but around a line below the text at the left.
It's this I'm trying to correct.

Hmm. This has to do with the rest of your styles. Looking at a clean test
page
<URL:http://www.pretletters.net/_test/two_blocks_in_a_page_heading.html>,
nothing weirds happens. I think you might have a combined value for top
margin and padding that excede the total height of the element the span is
the direct child off. If so, you could do something about those
margin/padding values, or you could give the span a negative top margin.

--
______PretLetters:

Quote:

#5

On Wed, 17 May 2006 19:06:53 +0200, jkn <jkn_gg (AT) nicorp (DOT) f9.co.uk> wrote:

Quote:

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 2px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] +
[top and bottom border widths] */
height:35px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:#999999; /* black; */
border-width:1px 0px; /* top and bottom borders: 1px; left and right
borders: 0px */
voice-family:inherit;
height:14px; /* the correct height */
}

Something else: you could make your styles a bit more readable, like this:

#Header {
height:14px;
margin:50px 0 10px 0;
border:solid black;
border-width:1px 0;
padding:17px 0 2px 20px; }

/* and for IE: */
* html #Header {
height:35px; }

A lot less code, easier to read and to maintain.

--
______PretLetters:

Quote:

#6

Hi Barbara

[...]

Quote:

I tried this, in my form:

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

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

Please use a space before the span, so people with browsers without CSS

don't get
'My Site NameMy Right-aligned text'

Actually, I had a   in there, just not on my cut-down example...

Quote:

And got what I was seeing before - the right-aligned text appears to
the right, as desired, but around a line below the text at the left.
It's this I'm trying to correct.

Hmm. This has to do with the rest of your styles. Looking at a clean
test
page
<URL:http://www.pretletters.net/_test/two_blocks_in_a_page_heading.html>,

nothing weirds happens.

I had a look at your page, and interestingly Firefox seems to behave
differently to other browsers! 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. With Opera and Konqueror the behaviour was more what I
hoped for, with both bits of text inside the red border. So am I
encountering a bug in Firefox?

BTW, on the other two browsers, when I narrow the window the right text
'drops' a line, rather than overlapping, so I don't really get the
effect you mention above.

Quote:

I think you might have a combined value for top
margin and padding that excede the total height of the element the span

is
the direct child off. If so, you could do something about those
margin/padding values, or you could give the span a negative top
margin.

I don't have any special settings for this part of the page other than
what I posted. I was able to align the two bits of text by fiddling
with an offset, but this made it appear wrong in Opera and Konqueror,
hence my original post! I was hoping to have an elegant cross-browser
solution...

Thanks again
Jon N

#7

On Wed, 17 May 2006 20:40:09 +0200, jkn <jkn_gg (AT) nicorp (DOT) f9.co.uk> wrote:

Quote:

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

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

Please use a space before the span, so people with browsers without CSS
don't get
'My Site NameMy Right-aligned text'

Actually, I had a   in there, just not on my cut-down example...

See... It is really better to upload a page and give a URL, so
participants in this group don't get to waste time on things that do not
exist in real life. So if you please.

Quote:

URL:http://www.pretletters.net/_test/two_blocks_in_a_page_heading.html>,
nothing weirds happens.

I had a look at your page, and interestingly Firefox seems to behave
differently to other browsers!

You did mention FF and I failed to take a look with that browser. It does
'dis'behave. Darn. :-( Never noticed this before.

Quote:

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?

Quote:

BTW, on the other two browsers, when I narrow the window the right text
'drops' a line, rather than overlapping, so I don't really get the
effect you mention above.

Well, this is a requirement you didn't mention before, or atleast I didn't
get that message. Using a float does have its limits. You could always go
with absolute positioning:

#Header {
position:absolute;
top:0;
left:0; }

#Header span {
display:block;
position:absolute;
top:0;
right:0; }

Not tested though.

--
______PretLetters:

Quote:

#8

Hi Barbara

[...]

Quote:

I had a look at your page, and interestingly Firefox seems to behave
differently to other browsers!

You did mention FF and I failed to take a look with that browser. It
does
'dis'behave. Darn. :-( Never noticed this before.

OK - at least it's not just me... let's see if other people have an
idea.

[...]

Quote:

BTW, on the other two browsers, when I narrow the window the right text
'drops' a line, rather than overlapping, so I don't really get the
effect you mention above.

Well, this is a requirement you didn't mention before, or atleast I
didn't
get that message. Using a float does have its limits. You could always
go
with absolute positioning:

It's not a requirement, just an observation, since you mentioned the
stylistic point about having space between the elements.

Thanks for your ideas and suggestions for stylistic improvements to the
CSS. As I say, I got the original code from a 'reputable' site, but I'm
happy to learn. I'm familiar with coding conventions in some languages
but not particularly with CSS.

Thanks
Jon N

#9

Barbara de Zoete wrote:

Quote:

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

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

You did mention FF and I failed to take a look with that browser. It does
'dis'behave. Darn. :-( Never noticed this before.

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.

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

Now playing: UB40 - Guilty

#10

Hi Els

Quote:

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.

Thanks for the pointer
Jon N

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

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

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 12:06 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 12:32 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 01:08 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 01:26 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 01:38 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 01:40 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 01:53 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 02:01 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 02:15 PM

Re: newbie: header spanning two columns with left- and right-alignment - 05-17-2006 , 02:37 PM