CODEWITHSUNDEEP
htmlcsshtml-tabletext-alignment
Earlz
Earlz

Reputation: 63905

text-align not working as expected

I am attempting to make two elements on different sides of their container. In my actual code these two elements are to be on opposite sides of a div, but for the sake of example, lets say I want them on opposite sides of the browser window.

So I did a simple:

<html>
<head>
</head>
<body>
<table>
<tr>
<td style="width: 50%;text-align: left;">
This should go left
</td>
<td style="width: 50%;text-align: right;">
This should go right
</td>
</tr>
</table>
</body>
</html>

Example at: http://jsbin.com/ocete/

Well, I'm not entirely for sure how to do this very well with divs even. Also in the right aligned table cell, there will be two elements in my actual code. One is an image and one is a piece of text. I want them to be on opposite sides of the <td> in which they are contained.

How can I do this the way I want? I am not seeing any straight forward way. (and please do not recommend fixed positioning)

Upvotes: 1

Views: 29021

Answers (6)

ryanulit
ryanulit

Reputation: 5001

Are you always going to be using a table? If so the above answers will work. But if you are using two divs within a container div, you need to float the inside divs to the left and right respectively and then clear your floats in the container div.

Upvotes: -1

Brian H
Brian H

Reputation: 4110

If you're looking to put an image side by side with text on separate sides of a table you can use the following:

<table style="width: 100%">
<tr>
<td style="text-alight: left;">
text
</td>
<td style="text-align: right;">
  <table style="width: 100%">
    <tr>
      <td style="text-align: left;">image</td>
      <td style="text-align: right;">text</td>
    </tr>
  </table>
</td>
</tr>
</table>

That should get you something like

-----------------------------
|text    |image    |    text|
-----------------------------

Upvotes: 4

Doc Snuggles
Doc Snuggles

Reputation: 241

Add a width to your table..

<table style="width: 100%">

Edit: tooo Slow

Upvotes: 0

Konrad Rudolph
Konrad Rudolph

Reputation: 546083

Any reason to use a table for the layout? Use two divs instead, put their width to 50% each, and float the second div to the right.

Upvotes: 0

nickf
nickf

Reputation: 546473

You don't have a width specified for your table, so it is only as wide as it needs to be, therefore you can't see the text alignment making any difference.

Try this

<table style="width: 100%">

and take another look.

Upvotes: 1

Jerod Venema
Jerod Venema

Reputation: 44652

To your <table> element, add:

style="width: 100%"

Everything is working perfectly, your table just isn't big enough to see it.

Upvotes: 13

Related Questions