Question to the alignment with CSS

Rainer G · Post by **Rainer G** » Sun 27. Feb 2005, 12:23

It is possible in one line a part of text in left alignment and a part in right alignment with CSS?

I mean this:

|                                                                         |
left text                                                        right text

What must i do, or isn't that possible?

cyrano · Post by **cyrano** » Sun 27. Feb 2005, 12:24

hi rainer,

with a table and setting of row or columns left and right orientated- yes.
TABLE:

Code: Select all

<table width="400" cellspacing="1" cellpadding="1" border="0" align=""><tbody><tr><td valign="top" align="left">&nbsp;left text<br/></td><td valign="top" align="right">right text&nbsp;</td></tr></tbody></table>

ok with css layer just the same: create 2 divs and set the values and position

CSS DIVs:

Code: Select all

<div style="border: 1px dotted rgb(223, 223, 223); padding: 5px; z-index: 1; left: 350px; width: 260px; position: absolute; top: 30px; height: 400px; background-color: rgb(255, 255, 255);" id="Layer1"><div align="left"><br/></div></div><div style="border: 1px dotted rgb(223, 223, 223); padding: 5px; z-index: 2; left: 0px; width: 300px; position: absolute; top: 30px; height: 400px; background-color: rgb(255, 255, 255);" id="Layer2"><br type="_moz"/></div>

you can reduce this in making 2 new classes, one for container 1 and the second for container 2 and just call this style for each container.

Rainer G · Post by **Rainer G** » Sun 27. Feb 2005, 12:25

cyrano wrote:hi rainer,

with a table and setting of row or columns left and right orientated- yes

With tables i know this

My question is, can i do it with CSS!

brans · Post by **brans** » Sun 27. Feb 2005, 13:55

he answered your question, see the second code he posted.

cyrano · Post by **cyrano** » Sun 27. Feb 2005, 14:07

jepp have this in each article i use, but have to experiment with setup all repetitive stuff in a class....

but now with the possibility of custom blocks (when knowing how it works exact :-) ) it will be no more necessary.

Karla · Post by **Karla** » Sun 27. Feb 2005, 14:40

Most "basic" form would be a simple nested DIV w/ float:

Code: Select all

<div><!-- no content whatsoever here -->
<div style="float: right; width: 50% text-align: right;">
Now put the right hand column here
</div>
The left hand column goes here
</div>