SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS alignment

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile CSS alignment

    hi..
    I am stuck up with a problem in css.. can any of u help me out.

    i have a page where i need alignment like the below

    (existing scenario)

    subtotal : $100

    shipping & handling : $500
    --------------------------------------------------------

    the problem i have is.. the dashed line u can see must be have width according the maximum text above. in this case.. the width it must have is according to the shipping

    so the scenario as to be like

    subtotal : $100

    shipping & handling : $500

    --------------------------------------


    the code i have written is as follows:
    <html>
    <head>
    <style>
    .ryp_summaryPadding {padding-top:10px;padding-bottom:10px}
    .ryp_summaryAlign {background-color:#fff; padding-top:5px; padding-right:5px;
    margin-right:5px; margin-left:625px; padding-bottom:10px; padding-left:15px}
    .summary_sep {border-style:solid none none; border-width:5px;border-color:#eeeef8;
    margin-top:10px; clear:both;width:inherit;}
    .summary_rowAlign {float:right; text-align:right; padding:2px; clear:right;
    margin-top:-15px}
    .summary_leftAlign {position:relative; right:90px; top:15px; white-space:nowrap}
    .summary_rightAlign {position:relative; right:10px; white-space:nowrap}
    </style>
    </head>
    <body>

    <div class="ryp_summaryPadding">
    <div class="ryp_summaryAlign">
    <div class="summary_textfontnormal">

    <div class="summary_rowAlign">
    <span class="summary_leftAlign">Shipping &amp; handling/span>
    <span class="summary_rightAlign"><div>GBP 232.00</div></span>
    </div>

    <div class="summary_rowAlign">
    <span class="summary_leftAlign">Tax/span>
    <span class="summary_rightAlign"><div>GBP 12.00</div></span>
    </div>

    <div class="summary_rowAlign">
    <span class="summary_leftAlign">Seller discounts (-) or charges (+)/span>
    <span class="summary_rightAlign"><div>GBP 2.00</div></span>
    </div>
    <br/>
    <div class="summary_rightAlign">
    <div class="summary_sep"></div>
    </div>

    </div></div></div>

    </body>
    </html>

    can u tell me the possible solution please ........

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope that's not all of your HTML code. If it is, you're missing a DOCTYPE declaration, TITLE element, character encoding, and the type="text/css" attribute and value in your HTML page.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    can u tell me the possible solution please ........
    Looks like tabular data to me and a table would be the suitable choice.

    You could do something simple like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    .wrap{
        float:left;
        margin:25px;
        display:inline;
        background:#ffffcc;
        border-bottom:1px dashed #ccc;
        padding:10px 2px;
        text-align:right;
     line-height:1.4em;
    }
    
    .wrap dt{
        float:left;
        clear:both;
        padding-right:30px;
        text-align:left;
    }
    
    
    </style>
    </head>
    <body>
    <dl class="wrap">
        <dt>SubTotal</dt>
        <dd>$100.00</dd>
        <dt>Shipping &amp; handling:</dt>
        <dd>$500.00</dd>
    </dl>
    </body>
    </html>


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
  •