Page 1 of 1
Question to the alignment with CSS
Posted: Sun 27. Feb 2005, 12:23
by Rainer G
It is possible in one line a part of text in left alignment and a part in right alignment with CSS?
I mean this:
What must i do, or isn't that possible?
Posted: Sun 27. Feb 2005, 12:24
by cyrano
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"> left text<br/></td><td valign="top" align="right">right text </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.
Posted: Sun 27. Feb 2005, 12:25
by Rainer G
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!
Posted: Sun 27. Feb 2005, 13:55
by brans
he answered your question, see the second code he posted.
Posted: Sun 27. Feb 2005, 14:07
by cyrano
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.
Posted: Sun 27. Feb 2005, 14:40
by Karla
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>