how to get text aligned left from input box

Question

please check the result here: http://jsfiddle.net/2zjv6jcp/

the problem is that on the top i have a select box and because that box is smaller than the other textboxes (and not 80% width) the text below it (straatnaam en nummer) won't be shown and also as you can see all the labels are one up (like contactpersoon is shown before Plaats) how can i align everything good?

Hi currently i have this in a fieldset:

<div id="content">
    <div id="formWrapper">
        <form id="msform">
            <fieldset id="fieldset3">
                <h2 class="fs-title">Aflevergegevens</h2>
                <h3 class="fs-subtitle">Stap 3: Aflevergegevens</h3>
                <div class="fs-error"></div> 
                <label for="locationLabel">Locatie</label>
                <select  name="locations">
                    <option>test</option>
                </select>
                <label for="addressLabel" style="float:left;">Straatnaam en nummer</label><input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />
                <label for="postalCodeLabel">Postcode</label><input type="text" name="postalCode" id="postalCode" placeholder="Postcode" />
                <label for="placeLabel">Plaats</label><input type="text" name="place" id="place" placeholder="Plaats" />
                <label for="contactPersonLabel">Contactpersoon</label><input type="text" name="contactPerson" id="contactPerson" placeholder="Contactpersoon" />
                <br/>
                <input type="button" name="previous" class="previous action-button" value="Vorige" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />   
                <h2>JSON</h2>
                <pre id="result">
                </pre>
            </fieldset>
        </form>
    </div>
</div>

please check the result here: http://jsfiddle.net/2zjv6jcp/

the problem is that on the top i have a select box and because that box is smaller than the other textboxes (and not 80% width) the text below it (straatnaam en nummer) won't be shown and also as you can see all the labels are one up (like contactpersoon is shown before Plaats) how can i align everything good?

Answer 1

I updated the fiddle to solve some of your problems: http://jsfiddle.net/2zjv6jcp/19/

Code-Examples:

<div class="wrapper">
    <label for="address" style="float:left;">Straat/No</label>
    <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />
</div>

#fieldset1 label,#fieldset3 label
{
    width:20%;
    float:left;
    line-height:45px;
}

Changes:

• Wrapper around the elements,
• Corrected the label-fors (has to be exact like the input/select),
• Line-height for labels (will center it vertically),
• Paddings/margins and font for inputs/selects,
• Shortend the labels.

Edit: I restructured the code to use less div-wrapper: http://jsfiddle.net/2zjv6jcp/19/

Answer 2

There exists an aversion towards using tables for formatting HTML components, rightly so due to abundant abuse in the past, but the point still stands: if you want something to be formatted as a table, then use a table.

Thus, my solution (plus some fiddling to make the input and select elements more uniform): http://jsfiddle.net/fvmasq9z/

If you really (REALLY) despise tables, you can use blocks (like <div> ) to wrap each line (meaning: input field and related label), give the labels a fixed width and the input fields the remainder to simulate two visual columns.

Better yet, you can substitute the row- <div> s with just a <br> tag at the end of each line, then give all labels the same fixed width and again the input fields the remainer of the line width.

 /*custom font*/ @import url(http://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * { margin: 0; padding: 0; } #formWrapper { min-height: 494px; } #mhead { font-family: Georgia !important; background-color: #f5f5f5; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); text-align: center; font-family: georgia; position: fixed; top: 0px; width: 100%; padding: 20px; } /*form styles*/ #msform { /* font of the form */ font-family: montserrat, arial, verdana; width: 800px; margin: 50px auto; /*text-align: center;*/ /*----------------------->1*/ position: relative; } #msform select { /*float:left;*/ width: 100px; margin-right: 10px; height: 29px; } #todu { font-size: 7pt; color: red; padding-left: 65px; -webkit-padding-start: 55px; } #todu2 { font-size: 7pt; color: red; padding-left: 65px; -webkit-padding-start: 105px; } #msform fieldset { background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; /*----------------------->2*/ position: absolute; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } #fieldset3 table { width: 100%; } #fieldset3 table td { margin-bottom: 10px; } #fieldset3 table td:first-child { width: 40%; text-align: right; padding-right: 1em; } #fieldset3 table td input, #fieldset3 table td select { width: 100%; } #fieldset1 label, #fieldset3 label { width: 20%; /*float:left;*/ margin-top: 10px; } /*inputs*/ #msform input, #msform textarea, #msform select { padding: 15px; border: 1px solid #ccc; border-radius: 2px; margin-bottom: 10px; width: 80%; height: 45px; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 12px; } #msform textarea { min-height: 110px; margin-left: 50px; } #bijlageTD input[type="file"] { height: auto; width: auto; border: 0px; padding-left: 60px; -webkit-padding-start: 150px; } /*buttons*/ #msform .action-button { width: 100px; background: #27AE60; font-size: 13px; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 5px 5px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; } #msform .tableProgressForm textarea { height: 110px; } .tableProgressForm { clear: both; } /*headings*/ .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-right: 30px; margin-bottom: 20px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: rgb(0, 0, 0); text-transform: uppercase; font-size: 11px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #fff; border-radius: 3px; margin: 0 auto 5px auto; background: #013b7a; position: relative; z-index: 2; } /*progressbar connectors*/ /*progress bar line*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: #013b7a; position: absolute; left: -50%; top: 9px; z-index: 1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #27AE60; color: white; } .red { color: red; } .success { color: green; } .statusHead1 { width: 100%; font-weight: bold; border-bottom: 1px solid #bfcfdf; } #message { padding-top: 200px; position: relative; text-align: center; } .btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; font-family: Arial; color: #ffffff; font-size: 15px; padding: 8px 18px 7px 16px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } /*space between the toggle button and showing manual and catalogus order box. */ .manualOrderBox { margin-top: 30px; } .catalogusOrderBox { margin-top: 30px; margin-bottom: 20px; } .amountBox { text-align: right; } 

 <div id="content"> <div id="formWrapper"> <form id="msform"> <fieldset id="fieldset3"> <h2 class="fs-title">Aflevergegevens</h2> <h3 class="fs-subtitle">Stap 3: Aflevergegevens</h3> <div class="fs-error"></div> <table> <tr> <td> <label for="locationLabel">Locatie</label> </td> <td> <select name="locations"> <option>test</option> </select> </td> </tr> <tr> <td> <label for="addressLabel">Straatnaam en nummer</label> </td> <td> <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" /> </td> </tr> <tr> <td> <label for="postalCodeLabel">Postcode</label> </td> <td> <input type="text" name="postalCode" id="postalCode" placeholder="Postcode" /> </td> </tr> <tr> <td> <label for="placeLabel">Plaats</label> </td> <td> <input type="text" name="place" id="place" placeholder="Plaats" /> </td> </tr> <tr> <td> <label for="contactPersonLabel">Contactpersoon</label> </td> <td> <input type="text" name="contactPerson" id="contactPerson" placeholder="Contactpersoon" /> </td> </tr> </table> <br> <br/> <input type="button" name="previous" class="previous action-button" value="Vorige" /> <input type="submit" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form> </div> </div>