Does anyone have any tips on how to fix the below problem of the labels and text-areas being so unsymmetric? What's the best way to structure a form like this?

I was thinking of having one div floating left (with the labels) and another div with the text areas floating right, but I didn't quite manage to structure it correctly.

Does anyone have any tips on how to fix the below problem of the labels and text-areas being so unsymmetric? What's the best way to structure a form like this?

I was thinking of having one div floating left (with the labels) and another div with the text areas floating right, but I didn't quite manage to structure it correctly.

• javascript
• jquery
• html
• css
• forms

• 1 Where is your HTML and CSS, what is the desired appearance, and what have you tried to achieve it? Also note that basically the same question has been asked often, usually spawning a bunch of plicated approach, and sometimes also the logical table approach (and religious attacks on it). So please search for old questions; if they don’t directly answer your problem, they probably help to formulate your question better. Oh, and don’t tag questions with javascript or jquery when there is no apparent connection with them. – Jukka K. Korpela Commented Apr 12, 2014 at 17:56

3 Answers 3

It was your idea, I just wrote it...

Fiddle

HTML Layout

<div>
    <div class="left">
        <span>Comment</span>
        <span>Tags</span>
        <span>Category List</span>
    </div>
    <div class="right">
        <input type="text" />
        <input type="text" />
        <select></select>
    </div>
</div>

CSS

body { background: #222; color: white; }

.left, .right { width: 50%; float: left; }

.left  { text-align: right; }
.right { text-align: left;  }

span, input, select { display: block; padding: 5px; margin: 5px; }

span   { font-family: sans-serif; line-height: 20px; font-weight: bold;     }
input  { width: 200px;            height: 30px;      box-sizing:border-box; }
select { width: 200px;            height: 30px;      box-sizing:border-box; }

The best way is to use BootStrap framework styling issue. you can enter the website and learn more.. alternative way is to put the labels and the input fields (select fields also) in table and they will be organized.

The better to submit BootStrap otherwise use the simple way. and there is no floating issues and that's better!

If you want to use divs, then make them both float:left and immediately after put <div style="clear:both"></div>. Then they will be displayed correctly. Personally I use tables for this though, like in Islam Attrash's answer.