views:

302

answers:

4
<table><tr><td><input type="checkbox" id="41" value="1">   
Don't overwhelm yourself
<span style="color:black;float:right">111111</span></td></tr>  </table>

The text "111111" doesn't go to the right.

When I use "align:right", it is the same.

<table><tr><td><input type="checkbox" id="41" value="1">   
Don't overwhelm yourself
<span style="color:black;align:right">111111</span></td></tr>  </table>

How to solve this problem?

A: 

The span tag is not a block one (css: display=block;), it is inline. It means that it does not occupy the whole line, and text inside it is not aligned (visually).

Replace your span with div, it will work.

To have different alignments on the same line, you need a bit of CSS tricks:

<div style="float: left;">
    <label><input type="checkbox" id="41" value="1"> Don't overwhelm yourself</label>
    </div>
<div style="float: right;">
    111111
    </div>
o_O Tync
It doesn't work.
Steven
What brower? I guess you're using IE6 :) That code is valid and the best way to have two different alignments at one line. It should work at least in "good" browsers.
o_O Tync
A: 

Span can't change page flow, so you can't use floats with span.

Roman
Wrong. Floating a span makes it a block-level element. http://www.w3.org/TR/CSS2/visuren.html#floats
Tyson
+2  A: 
<!-- width 100%, so we can see the floating -->
<table style="width:100%">
  <tr>
    <!-- width 100%, so we can see the floating -->
    <td style="width:100%" >

      <!-- float to left -->
      <input style="float:left" type="checkbox" id="41" value="1">    
      <span style="float:left"> Don't overwhelm yourself </span> 

      <!-- float to right -->
      <span style="color:black;float:right">111111</span> 

      <!-- clear floating -->
      <br style="clear:both" /> 
    </td>
  </tr>
</table>

check sample here

Anwar Chandra
Cool. The problem has resolved with your help.
Steven
If it's answering your problem, you can mark it as answer.
Anwar Chandra
was useful for me too, thanks
akjain
A: 

Just don't create the problem. Assuming you don't have any reason not to use simply 2 table cells.

Also, align never works. You should use text-align.

<table>
  <tr>
    <td>
      <input type="checkbox" id="41" value="1">Don't overwhelm yourself
    </td>
    <td style="color:black;text-align:right">
      111111
    </td>
  </tr>
</table>
Aeolun