align text

[Dennis_Gull]

hey, Im currently have a td and inside that td I got two text fields that I want on each side (right and left) but I cant get the text to align with a normal p tag
this is what it looks like now:

<td width="400"><p align="left">text 1</p><p align="right">text 2</p></td>

this is bugging me a lot because I cant use td's at this place so I would appreciate if someone could help me out here

[Twey]

Ugh, presentational markup! This can't be done in HTML anyway, you need CSS and float:

td.bothsides {
  width: 400px; // but, pixel measurements are bad!
}

td.bothsides p {
  width: 46%;
  margin: 1%;
}

td.bothsides p.left {
  float: left;
  text-align: left;
}

td.bothsides p.right {
  float: right;
  text-align: right;
}

<td class="bothsides">
  <p class="left">
    text 1
  </p>
  <p class="right">
    text 2
  </p>
</td>

[alexjewell]

this is bugging me a lot because I cant use td's at this place

Thank God. Would you like how to do this in div's instead?

[Dennis_Gull]

Thanks for the reply, the code you provided works when I use a td tag but after i made this post I changed everything to a div tag =/

Thank God. Would you like how to do this in div's instead?

actually I was just going to write that :P
Im working with ajax at the moment and Im making a suggest box under the search field but I want some of the info to be on the right side (like google suggest) and all I have is a div tag and then I use innerHTML to place the data like this: (ignore class="none" its because the box is inactive)

<div id="search_bar" class="none"></div>

and in the innerHTML it looks like this (cleaned from scripts):

looping...
<div>text 1 , text 2 (should be align right), text 3 (should be align right)</div>
looping...

The reason I didnt place text 2 and 3 in div tags is because div tags take up a new row but then I remembered that I could use display: inline; but heres the funny part, if i use that option the align right somehow doesnt work...

[Twey]

Use float like I did. Inline elements can't have text-align; you need a floated block-level element.

then I use innerHTML

innerHTML is non-standard, destroys event handlers, leads to ugly, markup-dependent code, and doesn't work in XHTML. Avoid it.

[Dennis_Gull]

isnt innerHTML the only way to update parts of the page with help from with ajax?

[Twey]

Of course not. Use the DOM methods instead.

[jscheuer1]

Twey is a bit extreme on innerHTML. He is so good at most other things, we forgive him. One must be careful with it though, just as one must correctly use any other object in javascript, with awareness of its side effects and limitations.

[Twey]

There are times and places where innerHTML is necessary. However, this is not one of them, and its limitations are such that it should be avoided wherever possible.

[Dennis_Gull]

Thanks for all the replys I got everything to work now with float, it looks like this:


I will also take a look at the link about DOM you gave me jscheuer1, I followed some tutorials on sitepoint before I read the book about ajax and they said that DOM often were slower then innerHTML so I never really took much of an interest in DOM.
But isn't it almost the same thing just that you create tags with createElement?

edit:
found a link with the benchmark on the different methods but maybe it doesn't matter when its such a small functions we're talking about.
http://www.quirksmode.org/dom/innerhtml.html