How do I format form elements effectively without using a table?

StackOverflow https://stackoverflow.com/questions/23174915

  •  06-07-2023
  •  | 
  •  

Question

I have been trying for several hours to format my form neatly without the use of a table.

I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:

Label(Root Diameter) | Input(text) | label(mm)

I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.

Here is my code.

html:

<head>

    <script src="jquery-1.11.0.min.js"></script>
    <script src="criticalSpeedCalc.js"></script>
    <link rel="stylesheet" href="calcstyle.css">

</head>

<body>
    <div id="calcWrapper">
        <form name="calculator" id="calculator">
            <label class="type">Unit of Measurement:</label>
            <br>
            <select name="unit" class="input">
                <option value="120904000">Metric (cm)</option>
                <option value="4760000">Imperial (inches)</option>
            </select>
            <br>
            <label class="type">Root Diameter:</label>
            <br>
            <input type="text" name="root" class="input" autocomplete="off">
            <label for="unit">mm</label>
            <br>
            <label class="type">Width between bearings:</label>
            <br>
            <input type="text" name="bearings" class="input" autocomplete="off">
            <label for="unit">mm</label>
            <br>
            <label class="type">End Fixity:</label>
            <br>
            <select name="fixity" class="input">
                <option value=".36">1</option>
                <option value="1.0">2</option>
                <option value="1.47">3</option>
                <option value="2.23">4</option>
            </select>
            <br>
            <label class="type">Max Speed:</label>
            <br>
            <input type="text" name="speed" class="input" autocomplete="off">
            <label for="rpm">rpm</label>
            <br>
            <br>    <a href="#" id="reset" class="input" onclick="">Reset</a>
<a href="#" id="calculate" class="input" onclick="Calculate(); return(false);">Calculate</a>
<a href="#" id="close" class="input" onclick="">Exit</a>

        </form>
    </div>
</body>



#calcWrapper {

    background-image: url("Design1.png");

    width: 265px;

    height: 365px;

    float: left;

    /*border-width: 2px;
border-style: solid;*/

}

css:

#calculator {

    width: 186px;

    height: 230px;

    margin-left: 38px;

    margin-top: 115px;

    padding-left: 5px;

    font: bold 11px Helvetica, Arial, sans-serif;

    text-align: center;

    -moz-box-sizing:content;

    /*border-width: 2px;
border-style: solid;*/

}



.input {

    margin: 1px;

    max-width: 80px;

    max-height: 10px;

    font: bold 10px Helvetica, Arial, sans-serif;

    display: block;

    vertical-align:middle;

    margin-bottom: 10px;

    float: right;

}

select.input {

    max-height: 18px;

}

label.type {

    width: 80px;

    display: block;

    vertical-align:middle;

    float:left;

    clear:left;

    margin: 2px;

}

And here is a fiddle link

Was it helpful?

Solution 5

I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.

For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)

And here is a link to an updated fiddle

Hope I was able to help anyone in the same predicament.

OTHER TIPS

You can have "normal" html tags and table-like display using the CSS Table Model

Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)

.table {
    display:table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}

Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/

You can just float your .input class to the left and make it a bit narrower (max-width:70px).

See it here: http://jsbin.com/pepixare/1/edit

I use div's to solve this problem. my width is in % you can use px if you prefer.

col- represents the width of the div in %.(col-40 == width:40%;)

you can easily implement this with other attributes like inputs,ul,ol,a,img ect.

<div class="table">
<div class="tr">
    <div class="th col-40 fl pd-l-2">monday</div>
    <div class="td col-2 fl">&#58;</div>
    <div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
    <div class="th col-40 fl">tuesday</div>
    <div class="td col-2 fl">&#58;</div>
    <div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>

.table {
width: 100%;
float: left;
cursor: pointer;

}

.table .tr {
float:left;
width:100%;
height:40px;

}

.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;

}

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top