Text Alignment Options

[imasharkbear]

Text Alignment is pretty simple. But two separate text alignments for one line? I'm stumped.

Lets say I have a DIV content box.
I write something. I make it left aligned. Then I want a space between the text and other text that i want right aligned.
Hmm, like this:

[Favorite Color:_______________________________________Green]
For the sake of confusion, the brackets are the DIV Border.
And the underscores are the "space" between.


I tried a P alignment. But that dropped the text down a line.
and i spent about 10 minutes figuring out how many nbsp i could fit in... didn't work.



Heres a pic:
http://i525.photobucket.com/albums/cc338/c...ldesign/DIV.png


its the text that is split down the middle.




Thank You.

[mipadi]

You're gonna have to use 2 <div>'s, placed side-by-side, each with their own alignments.

[newkidontheblock]

You can make a HTML table

CODE

<style type="text/css" >
.left {
background-color: red;
text-align: left;
width: 150px;
}

.right {
background-color: green;
text-align: right;
width: 150px;
}
</style>
<table cellpadding="5" cellspacing="0" border="0" summary="" >
<tr>
<td class="left" > Left Text </td>
<td class="right" > Right Text </td>
</tr>
<tr>
<td class="left" > Left Text </td>
<td class="right" > Right Text </td>
</tr>
</table>

Here is a preview


You can also do that using css float. Which is for more advance building. People use it sidebars and those type of things.

[Mikeplyts]

Yeah, the css float thing is simply a property like below.

CODE

float: left;

CODE

float: right;

The only thing is that you can't use "center", just "left" or "right".

[imasharkbear]

Ok, How would i code the float code?

[Mikeplyts]

You could just use the table code Fawaz provided or you could try using a div tag.

[newkidontheblock]

Here is how you use CSS Float
This wasn't tested.
CSS

CODE

    #container {
        width: 300px;
        overflow: hidden;
}

    #left {
        text-align: left;
        float: left;
        width: 100px;
}

    #right {
        text-align: right;
        float: right;
        width: 150px;
}

HTML

CODE

<div id="container" >
    <div id="left" >
        Left Content Goes Here
    </div>
    <div id="right" >
        Right Content Goes Here
    </div>
</div>

Thank you Mike for the post below me. I fixed it.

[Mikeplyts]

^You acciendently put a single quote instead of a semi-colon at the end of "float: right".