Sven Groot I'm Commander Shepard and this is my favourite store on the Citadel.

Feb 27, 2005 at 12:15 PM

As you probably know, it is against recommended practice to use tables to layout a page in HTML, and instead use CSS.

There's just one thing I can't figure out how to do with CSS, and that's this:

Name:

Password:

What I mean is the fact that I want to left-align the two textboxes on eachother. This means that conceptually, I have two inline-block level elements, both containing two block level elements.
Now there is a CSS2.1 way to partically solve it, and that's this:
<div style="display:inline-block;vertical-align:top">
<div>Name:</div>
<div>Password:</div>
</div>
<div style="display:inline-block">
<div><input type="text" /></div>
<div><input type="text" /></div>
</div>

And in fact, I can do that, the result is this:

Name:

Password:

(EDIT: As you can see, this doesn't work. It works in the RichTextBox though, so you can see what I mean by replying with quote.)

As you can see, nice vertical alignment, but not-so-nice horizontal aligment. If you look at the source you'll also see a slight difference between the HTML sample I give above and the HTML I actually used to produce that result: I used <span> instead of <div> for the outer elements. This is necessary because IE only supports display:inline-block on <span>. This however has the side effect of it not being valid HTML anymore. What's more, Firefox doesn't support inline-block at all (it support -moz-inline-box, but that's buggy at best).

So is there any way to solve this problem, or is there no recourse except tables in this situation? Preferably one that also works in today's browsers.

Note: if there's a standards-compliant solution that doesn't work in IE/Firefox/insert-browser-here, I'd still like to know it.

(and on a related note, I'd love to use inline-block in situations where horizontal alignment doesn't matter, but I can't because Opera 7 is the only browser that to my knowledge supports it correctly)

W3bbo Work hard; increase production; prevent accidents, and be happy.

Feb 27, 2005 at 12:30 PM

I deal with this all the time on ASPFree forums.

Use the Definition-List element for semantics and CSS for presentation:



<fieldset>

<legend>Login</legend>

<dl>

<dt><label for="txtUsername">Username</label></dt>

<dd><input type="text" name="username" id="txtUsername" />



<dt><label for="txpPassword">Password</label></dt>


<dd><input type="password" name="password" id="txpPassword" />

</dl>

</fieldset>



CSS:



dt, dd { line-height: 1.5em; } /* enforce line height */

dd { float: right; margin-top: -1.5em; } /* shift <dd> up a line */

'tis all

Sven Groot I'm Commander Shepard and this is my favourite store on the Citadel.

Feb 27, 2005 at 1:09 PM

Interesting, but now the input boxes are on the far right of their containing block, which isn't what I mean either. Of course I could constrain the width of that block but that doesn't strike me as a good idea.

The inputs need to be layed out with their left edge aligned to that control which has the largest inline box to the left of it.
harumscarum out of memory

Feb 27, 2005 at 2:36 PM

I usually always use tables for forms. Yes it may violate section 3 paragraph 2 line 3 of the w3c but I find it is way too cumbersome to achieve the perfect form layout without a table.

Anywho check out alistapart because I know I have seen this on there. k quick google:http://www.alistapart.com/articles/practicalcss/ look about halfway down and you can find it.
W3bbo Work hard; increase production; prevent accidents, and be happy.

Feb 27, 2005 at 2:50 PM

Harum: What exactly is your avatar? I'm sure I've seen it somewhere before.
harumscarum out of memory

Feb 27, 2005 at 2:53 PM

It is from the movie Brazil.
Jorgie Jorgie
Feb 27, 2005 at 9:50 PM
Hows this:
<html>
<head>
    <title>Test Form</title>
    <style type="text/css">
      DIV { padding: 3px; }
    .wrapper { width: 15.5em; border: solid 1px black; }
    .label { width: 5em; float: left; }
    .field {}
    .buttons { width: 15em; text-align: right; }
    </style>
</head>
<body>
    <div class="wrapper">
      <div class="label">Username:</div>
      <div class="field"><input type="text" id="username" /></div>
      <div class="label">Pass:</div>
      <div class="field"><input type="password" id="password" /></div>
    <div class="buttons"><input type="submit" /></div>
    </div>
</body>
</html>
pftqg

Feb 27, 2005 at 10:21 PM

Try:
Username:
Password:

Or see it in action at http://extranet.nebulous.co.nz/ - known to work with IE, Firefox, and Safari.
StretchMan On the rebound! / Sur le rebond!

Mar 01, 2005 at 2:31 AM

Ok... stupid question...

Why is it bad to use <TABLE> as a layout technique ?
harumscarum out of memory

Mar 01, 2005 at 6:26 AM

It is just a matter of semantics. Tables should be used for tabular data not layouts. I do however use tables for forms because I find workarounds a bit cumbersome (see above )
Maurits AKA Matthew van Eerde

Mar 01, 2005 at 9:11 AM

Sort of a semantic fine point but there may even be an argument that
field name: input
field name: input
field name: input

is tabular data
urbandude

Mar 08, 2005 at 3:26 PM

Here you go: http://www.clagnut.com/blog/241/

Thread Closed

This thread is kinda stale and has been closed but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.

Name:
Password:

Avoiding table layout in HTML

Thread Closed