position one left aligned word next to a right aligned word in one div

Printable View

Oct 1, 2004, 12:32
Anything

position one left aligned word next to a right aligned word in one div

Not sure if this is a complete newbie question, but I looked at a lot of css websites and havent seen this:

I want to get this effect:

Price: --------$19,888
Make: ----------BMW

So the catagory(price/make) is left aligned and the value($19,888/bmw) is right aligned inside my fixed width div. (the dashes represent space)

I have been using 2 paragraph classes:

p.l {
text-align: left;
float: left;
}
p.r {
text-align: right;
float: right;
}

Then I use a between lines otherwise every thing would bunch up.

Is there a simpler way to do this effect? right now the clear all looks fine in ie6 but in firefox give lots of space between lines.

Thanks for any help... Pete
Oct 1, 2004, 13:29
Anything

Ok i figured it out... just incase anyone had the same question....

Year: 1995
 
Make: BMW
 
Model: 525i
 
Mileage: 30,565
 
Asking Price: $19,555
 

so just use one and add span classes of r and l
Oct 1, 2004, 13:50
Paul O'B

Hi,

Theres a similar thread here:

http://www.sitepoint.com/forums/showthread.php?t=198583

To clear elements without leaving a gap you can use this clearer style.

Code:

.clearer { clear:both; height:1px; overflow:hidden; margin-top:-1px; }

Code:

<div class="clearer"></div>

or even

Code:

 

However you can simplify your code and get rid of all those clearer divs by just floating one element and simplifying the mark up at the same time.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul#list, #list li{ margin:0; padding:0; list-style:none; text-align:right; } ul#list li span{float:left} </style> </head> <body> <ul id="list"> <li>Year:1995</li> <li>Make:BMW</li> <li>Model:525i</li> <li>Mileage:30,565</li> <li>Asking Price:$19,555</li> </ul> </body> </html>

Hope that helps.

Paul

Paul