Designing input data forms with CSS

bruceaj · June 23rd, 2008, 04:23 PM

All of the examples of input data forms that I find have the fields stacked on top each other, i.e.
   Label: Input text box
   Label: Input text box
   Label: Input text box

I would like to lay my forms out like:

   Label: Input text box Label: Input text box
   Label: Input text box Label: Input text box Label: Input text box Label: Input text box
etc.

I am trying to use the <fieldset> tag.

Doing this is SO easy with tables but I can't seem to be able to do using html and css.

Appreciate any help you can give me.

meow · June 23rd, 2008, 04:39 PM

What problem do you have? LABEL and INPUT are inline level elements so they'll line up just like words on the same line all by themselves if you don't do something to change that.

--
http://yupapa.com

bruceaj · June 23rd, 2008, 07:31 PM

I've reduced my code down to
HTML
<body>

        <label for="first">First:</label><input name="first" id="first" type="text" size="20">
        <label for="last">Last:</label> <input name="last" id="last" type="text" size="20">
<br />
        <label for="addr1">Address 1:</label>
        <input name="addr1" id="addr1" type="text" size="20">
<br />
        <label for="addr2">Address 2:</label>
        <input name="addr2" id="addr2" type="text" size="20">

</body>

CSS
label {
    float: left;
    width: 5em;
}

DISPLAYS
First: "Test Box" "Text Box"
Last: Address 1: "Test Box"
Address 2: "Text Box"

I'm new to CSS and HTML 4 so the solution might be pretty obvious and basic to someone fairly knowledgeable to both. Sorry.