Aligning Text Both Left and Right with CSS

do I need a <div> or a <span>, is it float or align?

[Ed_Gibbon]

I am just begining giving up tables for layout and starting to use CSS <div> and <span> and so on, but I am under a time-constraint to get a new site up and on the web.

I would like to have a single line with part of the text up against the left margin, and part of it up against the right margin, like this (the ¦ character represents the margins of the browswer, and the "--lots of empty space--" is empty space, this editor subtracts multiple spaces):

¦NAMEOFWEBSITE--lots of empty space--nameofwebsite.com¦

I have looked at various tutorials and experimented and gotten some very strange results, but not what I need. If anyone can point me in the right direction I'd be very appreciative.

Thanks!

[Nick_W]

<div id="container">
 <div class="fleft">Text left</div>
 <div class="fright">Tect Right</div>
 <div class="clearall"></div>
</div>
.fleft {
 float: left;
}
.fright {
 float: right;
}
.clearall {
 clear: both;
}

If it doesn't work, swap the divs over so the fright one is before the fleft. I can nvver recall which way it works ;)

Nick

[DrDoc]

If it's just a matter of text, there are two easier ways:

---

#r {
float: right;
}

<div id="container">

<span id="r">url.com</span>
name of Web site

</div>

---

However, the second method makes more sense when you look at it:

#container {
text-align: right;
}
#l {
float: left;
}

<div id="container">

<span id="l">name of Web site</span>
url.com

</div>

[Nick_W]

Nice, thanks Doc. Very elegant and embarassingly simple once demonstrated ;)

I've been doing it 'my way' for some time now....... ;(

Doh!

Nick

[DrDoc]

hehe
Well, "your way" is a must whenever you need both normal and floated content in the same container... Especially if the following content shouldn't be floating...