469,632 Members | 1,639 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,632 developers. It's quick & easy.

Left and right align text in 1 horizontal nav bar

Hi,

I'm killing myself trying to get a "horizontal nav bar" where some
text is left aligned, and some is aligned to the right, kind of like
this:

LEFT RIGHT
--------------------------------------------------------------

This is what I'm trying:

<div style="background-color: #ccccff; border-bottom: 1px solid
gray;">
<span style="text-align: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
</div>

But what I get looks like this, sort of:

LEFT
--------------------------------------------------------------
RIGHT

I think I tried all combinations of text-align/float: left/right
without success.

Is there a nice and clean CSS-way to get this right (heh)?

Any help would be very appreciated. Thanks!

May 7 '07 #1
5 9972
On 2007-05-07, OtisUsenet <ot*********@yahoo.comwrote:
Hi,

I'm killing myself trying to get a "horizontal nav bar" where some
text is left aligned, and some is aligned to the right, kind of like
this:

LEFT RIGHT
--------------------------------------------------------------

This is what I'm trying:

<div style="background-color: #ccccff; border-bottom: 1px solid
gray;">
<span style="text-align: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
</div>

But what I get looks like this, sort of:

LEFT
--------------------------------------------------------------
RIGHT

I think I tried all combinations of text-align/float: left/right
without success.
Putting the float first in the content should work.

According to the spec what you're doing should work, but both FF and IE7
put the float on the next line if there's any text before it.
May 7 '07 #2
OtisUsenet wrote:
Hi,

I'm killing myself trying to get a "horizontal nav bar" where some
text is left aligned, and some is aligned to the right, kind of like
this:

LEFT RIGHT
--------------------------------------------------------------

This is what I'm trying:

<div style="background-color: #ccccff; border-bottom: 1px solid
gray;">
Change to this:

<span style="float: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
</div>
--
-bts
-Motorcycles defy gravity; cars just suck
May 7 '07 #3
On May 7, 4:45 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalidwrote:
OtisUsenetwrote:
Hi,
I'm killing myself trying to get a "horizontal nav bar" where some
text is left aligned, and some is aligned to the right, kind of like
this:
LEFT RIGHT
--------------------------------------------------------------
This is what I'm trying:
<div style="background-color: #ccccff; border-bottom: 1px solid
gray;">

Change to this:

<span style="float: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
</div>
Thanks Ben and Beauregard!

Indeed, when I just use 2 spams with float: left and float: right,
that looks fine, but as soon as I put those 2 spans in that DIV above,
I get something that looks like this:

______________________________
LEFT RIGHT

The problem here is that the border should be on the bottom, as
specified. What I'm after is the "inverse" of that:

LEFT RIGHT
-----------------------------------------------------

Am I doing something wrong with that CSS?

Thanks!

May 7 '07 #4
On 2007-05-07, OtisUsenet <ot*********@yahoo.comwrote:
On May 7, 4:45 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalidwrote:
>OtisUsenetwrote:
Hi,
I'm killing myself trying to get a "horizontal nav bar" where some
text is left aligned, and some is aligned to the right, kind of like
this:
LEFT RIGHT
--------------------------------------------------------------
This is what I'm trying:
<div style="background-color: #ccccff; border-bottom: 1px solid
gray;">

Change to this:

<span style="float: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
</div>

Thanks Ben and Beauregard!

Indeed, when I just use 2 spams with float: left and float: right,
that looks fine, but as soon as I put those 2 spans in that DIV above,
I get something that looks like this:

______________________________
LEFT RIGHT

The problem here is that the border should be on the bottom, as
specified. What I'm after is the "inverse" of that:

LEFT RIGHT
-----------------------------------------------------

Am I doing something wrong with that CSS?
The point here is that floats don't normally contribute anything to the
height of their container. So the bottom border is at the top, below the
div's zero-height content area, and the floats overflow it to the
bottom.

Either make the containing div overflow: hidden (which makes it a "block
formatting context root" which means it _does_ include the floats in its
height calculation after all) or add something like <div style="clear:
both;"></divafter the floats.
May 7 '07 #5
OtisUsenet wrote:
Am I doing something wrong with that CSS?
Put something in the div (after the spams). Floats don't count.

<div style="background-color: #ccccff; border-bottom: 1px solid gray;">
<span style="float: left;">LEFT</span>
<span style="float: right; ">RIGHT</span>
<p style="text-align: center">Insert something between the spans.</p>
</div>

--
-bts
-Motorcycles defy gravity; cars just suck
May 7 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Joakim | last post: by
3 posts views Thread by kai | last post: by
4 posts views Thread by Steve Swift | last post: by
4 posts views Thread by Verticon:: | last post: by
2 posts views Thread by Michel Vanderbeke | last post: by
1 post views Thread by simsimlhr | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.