Title: Message
Crikey!
 
This did the trick, but is it save to use and valid?
 

.test1 {

            text-align: right;

            border: 1px solid red;

            display: block;

            position: absolute;

            width: 45%;

}

.test2 {

            text-align: left;

            border: 1px solid red;

            display: block;

            position: absolute;

            left: 55%;

}

 

<span class="test1">test1</span><span class="test2">test2</span><br/>

<span class="test1">test1</span><span class="test2">test2</span><br/>

<span class="test1">test1</span><span class="test2">test2</span>

 
 
Taco Fleur
Blog http://www.tacofleur.com/index/blog/
Methodology http://www.tacofleur.com/index/methodology/
0421 851 786
Tell me and I will forget
Show me and I will remember
Teach me and I will learn
-----Original Message-----
From: Taco Fleur [mailto:[EMAIL PROTECTED]
Sent: Thursday, 15 January 2004 8:20 AM
To: 'Web Standards Group'
Subject: [WSG] Table or CSS?

I read the thread about using tables for tabular data, I don't think the following is tabular data, or is it?
I'm having a hard time trying to achieve the layout with CSS.
 
I have a form in which I'd like the following layout
 
               [form field aligned right]  [text aligned left]
               [form field aligned right]  [text aligned left]
               [form field aligned right]  [text aligned left]
 
where right equals 45% from the left and left equals 55% from the left, leaving 10% space in between, if that makes any sense.
Its easy to achieve with a table, i.e.
<table width="100%" cellspacing="4">
<tr>
 <td width="50%" align="right"><input type="text"></td>
 <td width="50%">text</td>
</tr>
</table>
 
Just thinking stupidly, and the first thing that comes to my mind is

.test1 {

            text-align: right;

            display: inline;

            position: relative;

            left: 45%;

}

.test2 {

            text-align: left;

            display: inline;

            position: relative;

            left: 55%;

}

 

<span class="test1">input</span><span class="test2">text</span>

Which ofcourse does not work

 
Or am I asking a question that has already been answered a million times?
 
Taco Fleur
Blog http://www.tacofleur.com/index/blog/
Methodology http://www.tacofleur.com/index/methodology/
0421 851 786
Tell me and I will forget
Show me and I will remember
Teach me and I will learn
 

Reply via email to