473,324 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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 10142
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Cybertof | last post by:
Hello, Have you seen that if you try to right align multiple labels with different content, the labels are not aligned correctly ? Is it normal ? Cybertof.
0
by: Joakim | last post by:
hi. is it possible in the PrintPage function to align text to the right side instead of left if I set e.Graphics.DrawString("this is something I want to right to the printer", MyText,...
2
by: Kay | last post by:
Hello, I have a asp lable control, which I use to display text in, I would like to have the text display aligned in the center and vertical alignment left however when I add the following style...
3
by: kai | last post by:
Hi, All When I place a label on a Web form, label text is always left align, I cannot find the property to set right align. Any way to set align property for the label text to right align? ...
4
by: Steve Swift | last post by:
If it is possible, could someone demonstrate how to make the text entered into an <INPUT TYPE=TEXTfield right-align within the entry field, please? The fields in my form are for numbers, and...
4
by: Verticon:: | last post by:
I have a situation where I need, on the same line, a left aligned div and a right aligned div. When the window is resized and the div's eventually touch, I need them NOT to wrap, but instead,...
2
by: Michel Vanderbeke | last post by:
Hello, Is it possible to right-align the text in the list and / or the textbox of a combobox? Can it be done through properties or through code? Many thanks, Michel
1
by: simsimlhr | last post by:
I want to put book written in Urdu language over mobile in j2me Urdu is written from Right to Left.(Right Align) I have book available in Unicode form I don't want to convert it into image....
2
by: taras | last post by:
I have a problem with making horizontal menu with css. The problem is that menu should be right aligned, but items in sub menus should be left aligned. To make horizontal menu float:right property...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.