table-like layout with css? 1

[jemminger]

hi all,

i want to accomplish this layout in css ONLY, NOT using tables:
[tt]
+--------------------------------------+
| +------------------+----------+|
| | <input username> | <submit> ||
| +------------------+----------+|
| | <input password> | |
| +------------------+ |
+--------------------------------------+
[/tt]
i.e., i want to have the submit button next to the first input (username)

in tables, it's a snap - is this even possible with pure css?

oh, one more thing: all of these elements are right-aligned in their parent container.

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[ChrisHirst]

two <div>s with float:right will do that.

Chris.


Chris.

Indifference will be the downfall of mankind, but who cares?

 

[jemminger]

>> "two <div>s with float:right will do that."
chris, won't that just produce this:

[tt]
+--------------------------------------+
| +------------------+----------+|
| | <input username> | <submit> ||
| +------------------+----------+|
| | <input password> ||
| +------------------+|
+--------------------------------------+
[/tt]

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[ChrisHirst]

Not if they are in the correct order

like this.

<div align="right">
<form>
<div style="float:right;margin-left:5px;">
<input type="submit" value="submit">
</div>	  
<div style="float:right;">
Username: <input type="text">
<br>
Password: <input type="text">
</div>	  
</form>
</div>

Chris.

Indifference will be the downfall of mankind, but who cares?

 

[jemminger]

awesome...thanks!

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[TruthInSatire]

Jeff is bringing back ascii art

Chris, your divs are upside down. newish to css myself can you 'splane that please?

Human beings, who are almost unique in having the ability to learn from the experience of others, are also remarkable for their apparent disinclination to do so.
-Douglas Adams (1959-2001)

 

[ChrisHirst]

from a usual (table) layout they are,
but because it's a float right the positions are referenced from the left hand edge of the preceding div.
So the div with the button also serves as spacer for the inputs div.



Chris.

Indifference will be the downfall of mankind, but who cares?

 

[jemminger]

>> " your divs are upside down"
yeah, i had to check out the css manual after seeing this too. turns out since they're floated right, the first one in goes furthest right, next one floated slides to the right up to the previous one, and any non floated content would fill in to the left. probably wouldn't have figured this one out on my own!


=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }