views:

51

answers:

2

OK, I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables. Meh.

I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?!?

alt text

EDIT: Adding my CSS to see where I'm going wrong.

Here's as far as I got with the CSS:

.form_row {
    width: 500px;
}
.form_row label {
    text-align: right;
    width: 150px;
    float: left;
    margin-top: 6px;
    padding-right: 6px;
}
#id_first_name, #id_last_name {
    width: 130px;
}
#id_email, #id_password {
    width: 300px;
}

The Markup:

<div class="form_row">
    <label for="id_first_name">Name:</label>
    <input id="id_first_name" type="text" name="first_name" />
    <input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
    <label for="id_email">Email:</label>
    <input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
    <label for="id_password">Password:</label>
    <input id="id_password" type="password" name="password" />
</div>

And the result:

alt text

A: 

http://www.blueprintcss.org/

The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.

It's hard to give another answer with such little information in your question.

Scott
Sorry, I added more info.
Scott Willman
+5  A: 

You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.

As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.

Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.

Have a look at this: http://jsbin.com/osibu3/4

Tested in IE6+, FF3.6+, Chrome, Safari

Pasting for reference as well:

<!doctype html>
<html>
<head>
  <title></title>
  <style type="text/css">
    html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
    body { font:normal 62.5% lucida grande, lucida sans unicode }
    #my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
    #my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
    #my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
    input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
      border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
    .text.long { width:395px }
    .text.short { width:193px }
  </style>
</head>
<body>
  <form action="" id="my-form">
    <fieldset class="name">
      <label for="first"><strong>Name:</strong></label>
      <input type="text" name="first" value="first" class="text short"/>
      <input type="text"  name="last" value="last" class="text short"/>
    </fieldset>
    <fieldset>
      <label for="email"><strong>Email:</strong></label>
      <input type="text" name="email" class="text long"/>
    </fieldset>
    <fieldset>
      <label for="password"><strong>Password:</strong></label>
      <input type="text" name="password" class="text long"/>
    </fieldset>
  </form>
</body>
</html>
Moin Zaman
sweet jesus, that was fast. This is exactly what I was looking for, I'm gonna study this for a bit. Thank you so much, Moin!
Scott Willman