Thread: Expanding a div height

Originally Posted by jmurrayhead

Regardless, I don't like the way you're building your form. So, I'm going to show you this link which demonstrates how I do it...and it works really well: CSS-Based Forms: Modern Solutions | CSS | Smashing Magazine

Don't mince your words then J!!

It's so much easier if you just use tables...

I disagree I like the approach in the link I provided and I've seen a similar approach in some books, as well. It's a nice way to elegantly create user forms

tables good ... css bad ...

it would be so much nicer if all browsers played the same ...

Originally Posted by jmurrayhead

I disagree I like the approach in the link I provided and I've seen a similar approach in some books, as well. It's a nice way to elegantly create user forms

Which example do you use on that page J?

Whilst I would agree, it seems that as soon as you need to do something slightly different, CSS just doesn't want to play ball...

Here's a quick example of how I do my forms:

Code:

<ul class="input-fields">
    <li>
        <asp:Label ID="Label1" runat="server"
           AssociatedControlID="TextBox1"
           Text="Label 1" />
        <asp:TextBox ID="TextBox1" runat="server" />
    </li>
    <li>
        <asp:Label ID="Label2" runat="server"
           AssociatedControlID="TextBox2"
           Text="Label2" />
        <asp:TextBox ID="TextBox2" runat="server" />
    </li>
    <li>
        <asp:Label ID="Label3" runat="server"
           AssociatedControlID="TextBox3"
           Text="Label3" />
        <asp:TextBox ID="TextBox3" runat="server" />
    </li>
</ul>

and the CSS:

Code:

ul.input-fields
{
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.input-fields li
{
    margin: 0;
}
ul.input-fields label, ul.input-fields span
{
    display: inline-block;
    font-weight: bold;
    width: 10em;
}
ul.input-fields input, ul.input-fields select, ul.input-fields textarea
}
    margin: 2px 0;
}

How would you get it to look like this J?

Code:

 
               First Name: textbox
                Last Name: textbox
                    Title: dropdownlist
            Date of Birth: textbox / textbox / textbox

Something like this:

Code:

ul.input-fields
{
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul.input-fields li
{
    margin: 0;
}
ul.input-fields label, ul.input-fields span
{
    display: inline-block;
    font-weight: bold;
    width: 15em;
}
ul.input-fields input, ul.input-fields select, ul.input-fields textarea
}
    margin: 2px 0;
}

Would you not need some sort of align left / right in there?

The label is aligned right and the form elements aligned left.

From what you showed me you were looking for, what I have should work. I tested it before posting it.

Oh. OK. I haven't tested it yet as it'll mean re-writing all my pages...