By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,078 Members | 1,733 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,078 IT Pros & Developers. It's quick & easy.

Left and right align text in 1 horizontal nav bar

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.