text alignment on span in div

**samcarleton** · Apr 3, 2003 11:07

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>

**Coomer** · Apr 3, 2003 11:27

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.

**Ian Glass** · Apr 3, 2003 18:00

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

User Tag List

Thread: text alignment on span in div

Thread Tools

Display

text alignment on span in div

Bookmarks

Bookmarks

Posting Permissions