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

**Anything** · Oct 1, 2004 12:32

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

**Anything** · Oct 1, 2004 13:29

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

Year

/span> 1995
 
Make

/span> BMW
 
Model

/span> 525i
 
Mileage

/span> 30,565
 
Asking Price

/span> $19,555
 

so just use one and add span classes of r and l

**Paul O'B** · Oct 1, 2004 13:50

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:

<br class="clearer" />

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><span>Year:</span>1995</li>
<li><span>Make:</span>BMW</li>
<li><span>Model:</span>525i</li>
<li><span>Mileage:</span>30,565</li>
<li><span>Asking Price:</span>$19,555</li>
</ul>
</body>
</html>

Hope that helps.

Paul

Paul

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions