Align text left and right

[elem]

Hi guys,

i'm trying to achieve something that few years ago we would do like this:

<tr><td style="text-align: right; padding-right: 10px;">Phone:</td><td style="text-align: left;</td></tr>

Any ideas how can I achieve it with css ?

what I have currently is

<p>Phone:<span class="detail"> 0123456789</span></p>

And css:

.contact-content p {
text-align: right;
}
.contact-content detail {
padding-left: 30px;
text-align: left;
}

But it doesn't work, <span> is not pickin up text align ... Any suggestions ?

[SuzyUK]

Hi elem and Welcome to WebmasterWorld!

personally I think this might be a case for sticking with a table, it could be classed as tabular data, being as "phone" is the heading and the "detail" the content of a column/row..
however in the interest of answering your question ;) what you need to do is treat the two elements, the content and detail, separately just as they appear in the table the either float the first one left or use those verily handy "inline-blocks"

inline blocks are basically inline elements so they will appear side by side but their content is formatted like blocks so you can apply width, and therefore text alignment.. normally inline elements don't accept width which is why the text alignment won't work the way you're trying to use them, they are only as wide as the the text in them (a background color placed on elements will let you "see" where they are) ;)

anyhow here's a sample of one way, side by side with the table equivalent - as you'll see the table is actually slightly less code, though the construct of both bits of code is identical - and where I've used a <ul>/<li> you could actually use a <div>/<p> its just that if there is more contact information that just a phone number, if you really don't want it in a table I might instead be tempted to think about it as a list of details.. but the core how is the same nomatter which you choose :)

CSS:

.contact-content {
width: 600px;
border-collapse: collapse;
border: 1px solid #000;
table-layout: fixed;
}

.contact-content td {border: 1px solid #ccc;}

.contact-content .phone {
text-align: right; 
padding-right: 10px;
}

.contact-content .detail {
padding-left: 30px;
text-align: left;
} 

.cc {
list-style: none;
margin: 0; padding: 0; 
width: 600px;
border: 1px solid #000;
}

.cc span, .cc b {
display: inline-block; 
}

.cc span {
padding: 3px 30px;
}

.cc .phone, .cc b {
width: 46%;
text-align: right;
border-right: 1px solid #ccc;
font-weight: normal;
padding: 3px 10px;
}

HTML:

<table summary="" class="contact-content">
<tr><td class="phone">Phone:</td><td class="detail">0123456789</td></tr>
</table>

<hr>

<ul class="cc">
<li><span class="phone">Phone:</span><span class="detail"> 0123456789</span></li>
</ul>

<ul class="cc">
<li><b>Phone:</b> <span>0123456789</span></li>
</ul>

just had a thought, you could actually "cheat" to lessen the amount of code in the CSS example and use the <b> and <i> elements instead of spans, then you wouldn't need the class names, hmm maybe not cheating really as <b> *could* be the equivalent of <th> in a table.. (have added it onto the code for comparison ;))

Suzy