SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member samcarleton's Avatar
    Join Date
    Apr 2003
    Location
    Cincinnati, Ohio, USA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text alignment on span in div

    I have a simply problem. I am creating a table like thing using div's and span's. I have opted to use this method because I like the general look. The problem is that I would like to have everything on the right, aligned on the right. Here is the HTML/CCS:

    <html>
    <head>
    <title>Sample</title>
    </head>
    <style type="text/css">
    body { background-color: #FFFFFF; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 10pt;}
    div.sideBar { background-color: #EEEEEE; border: 1px solid #000000; border-top-width: 0px; float: left; font-size: 9pt; margin: 0em 1em 0em 0em; width: 15em;}
    div.sideBarHdr { background-color: #666666; border-bottom: 1px solid #000000; border-top: 1px solid #000000; color: #FFFFFF; font-weight: bold; padding: 0px .5em 0px .5em;}
    div.sideBarSep { border-top: 1px solid #666666; margin: 2px 0px 2px 0px;}
    div.sideBarTxt { padding: 4px .5em 4px .5em; }
    span.right { text-align: right; }
    span.left { font-weight: bold; text-align: left;}
    </style>
    <body>
    <div id="sideBar" class="sidebar" style="width: 20em;">
    <div class="sideBarHdr">Table Like Things</div>
    <div class="sideBarTxt">
    <div class="text"><span class="left">An Item/span><span class="right">The value</span></div>
    <div class="sideBarSep"></div>
    <div class="text"><span class="left">Some other Item/span><span class="right">Another value</span></div>
    <div class="sideBarSep"></div>
    <div class="text"><span class="left">One More Item/span><span class="right">Last value</span></div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    ********* Celica Lover Coomer's Avatar
    Join Date
    Apr 2002
    Location
    Not worth the drive
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of span.right { text-align: right; }, try this:
    span.right {float: right;}

    And instead of span.left { font-weight: bold; text-align: left;}, try this:
    span.left {font-weight: bold; float: left;}

    And then add "clear: both;" to div.sideBarSep so that it looks like this:
    div.sideBarSep {border-top: 1px solid #666666; margin: 2px 0px 2px 0px; clear: both;}

    Hope this helps. This article at A List Apart describes in further detail how to do what you want to do.
    + Celica =
    6G Celicas :: My '94-99 Toyota Celica resource

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if I'm not mistaken text-align is only available on block level stuff (<p>s, <div>s, etc.) whereas <span>'s inline, which is why that didn't work. However, you seem to be using a lot o' presentational-style (choosing an element to achieve an effect), which is really frowned upon. XHTML has meaning--you're trying to make a table with <div>s and <span>s, you really should use a <table> there:
    Code:
    <div id="sideBar">
      <!--headers should be marked up as headers-->
      <h1>Table Like Things</h1> 
      <!--you're marking up tabular data;
          there's no shame in using a table-->
    <table summery="...describe the table here...">
      <tr>
        <th>Item One:</th>
        <td>Value One</td>
      </tr>
      <tr>
        <th>Item Two:</th>
        <td>Value Two</td>
      </tr>
    </table>
    <!--...-->
    <Table>s aren't bad if they're used correctly. Any markup used incorrectly is no better and usually no worse than misusing a <table>. :-)

    ~~Ian


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
  •