CODEWITHSUNDEEP
htmlcssforms
Yarin
Yarin

Reputation: 183989

CSSing HTML form layout (Equal widths for labels/inputs)

I'm trying to create the following CSS rules for my HTML form layouts:

  1. Each label and corresponding input element take up 50% of width respectively:

|label | input |

  1. I want to be able to justify labels to right or left. (Inputs will always justify left.)

Something I've noticed- Label widths don't seem to be able to be set by CSS?

Any good ideas? Thanks

Upvotes: 2

Views: 4800

Answers (1)

robbrit
robbrit

Reputation: 17960

Your label needs to be floating:

label {
    float: left;
    width: 100px; /* change this to whatever you want */
    /* these make it look nicer */
    text-align: right;
    padding-right: 10px;
}

You'll need something below it to clear the float as well, but this should do the trick.

Upvotes: 3

Related Questions