Left and right alignment on same line 4

[Sleidia]

Hi guys,

Anyone knows the easiest way to horizontally align two text strings on a same line but on opposite sides by using only <span> tags?

Example :

[ This should be aligned on the left side ] [ This should be aligned on the right side ]

Thanks !

 

[monksnake]

I assume these 2 strings are in a block level element such as a div.

if so, just text-align each within each span like this:

<span style="text-align:left">[ This should be aligned on the left side ]</span>
<span style="text-align:right">[ This should be aligned on the right side ]</span>

<.

 

[Sleidia]

Thanks Monksnake

I've used your example inside a table cell (tested only on Firefox) but it didn't work :

<td>
<span style="text-align:left">[ This should be aligned on the left side ]</span>
<span style="text-align:right">[ This should be aligned on the right side ]</span>
</td>

So, it works only inside a div tag?

 

[traingamer]

I couldn't get the align to work either. Floats work, but need a width:

<p [b]style="width: 100%"[/b]><span style="float:left">[aligned left]</span><span style="float:right">[aligned right]</span></p>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

I'm sorry I'm being stupid can you give me the snippet of code that you are trying to get aligned the way you want??


Of course you can't align items in an inline element, they only take up the amount of space their content is (no empty space).

<.

 

[monksnake]

If this is a challenge to see if we can, then yes, display the <spans> as block and float one left and then the text-align works.


**By the way, I DON'T like coffee at all.

<.

 

[Sleidia]

Thanks Traingamer

Your method works on Firefox and IE and you don't need the <p style="width: 100%"> in a TD :

<td>
<span style="float:left">[ aligned  left ]</span>
<span style="float:right">[ aligned right ]</span>
</td>

Thanks again!

 

[monksnake]

Thanks for the star, though I have no idea what I did to deserve it.



<.

 

[Sleidia]

ehehe ... I always give stars to people who bother to respond to my questions.

Now, you know why

 

[kaht]

I'm really not jumping on the star bandwagon here, but I wanted to point out one thing. Using the code that traingamer posted above, you have to make sure that any block level elements that you want to appear in the middle of the 2 floated objects comes after the left and right floated objects in the code. This seemed weird to me at first, but you have to consider that any block level elements that appear before or between the 2 floated items will essentially "clear" the float because block level elements have a line break before and after.

To give an example, if you wanted to have text left aligned, centered, and right aligned along a header, the natural flow would make most people write it like this:

<h1>
   <div style="float:left">left</div>
   <div style="margin:0px auto; text-align:center">center</div>
   <div style="float:right">right</div>
</h1>

However, that code will produce the following:

-----------------------------
|left      center           |
|                      right|   
|                           |

As you can see the right aligned text is on a line below the other 2, because the center div will force a line break. To get them all on one line you would have to put the centered code after both the floats:

<h1>
   <div style="float:left">left</div>
   <div style="float:right">right</div>
[!]   <div style="margin:0px auto; text-align:center">center</div>[/!]
</h1>

I know you didn't ask about this, but it might save you some time down the road.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[Sleidia]

Hmmm ... why use DIVs (which add line breaks) instead of SPANs (which don't) ?

 

[Vragabond]

Because spans are inline elements and can only hold other inline elements, such as anchors, inputs, abbreviations, acronyms, strongs, images and such. They cannot hold paragraphs, forms, tables, lists and more. Divs can hold the first or the second.