SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    omaha
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 <br clear="all" /> 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

  2. #2
    SitePoint Member
    Join Date
    Oct 2004
    Location
    omaha
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i figured it out... just incase anyone had the same question....

    <p><span class="l">Year/span> <span class="r">1995</span>
    <br clear="all" />
    <span class="l">Make/span> <span class="r">BMW</span>
    <br clear="all" />
    <span class="l">Model/span> <span class="r">525i</span>
    <br clear="all" />
    <span class="l">Mileage/span> <span class="r">30,565</span>
    <br clear="all" />
    <span class="l">Asking Price/span> <span class="r">$19,555</span>
    <br clear="all" /></p>

    so just use one <p> and add span classes of r and l

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,530
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •