Position elements on a form using CSS - css

Question

I need to align labels and inputs of my form using CSS. The result should be something like this (I hope this simple scheme is clear):
Label1: ______
Labellll2: ______
Button
So, my HTML and CSS look as follows. The problem is that labels are placed on top of inputs, and also the button is on the right side instead of a bottom.
<form width="200px" name="optform" method="post" action="#">
<div class = "boxx">
<label for="param1">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param1" id="param1">
<label for="param2">Param1:</label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="param2" id="param2">
</div>
<div class="buttons">
<a href="#">
<img src="images/opt.png" alt=""/> Run
</a>
</div>
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}

Answer 1

The label needs to be
display:inline-block;
and the width is too large of either your label or input boxes. Padding and margins will cause problems with percentage widths because they are not taken into account.
Here is the updated css
div.boxx {
width: 500px;
}
div.boxx .input-text{
border:1px solid #A9C7F5;
color: #00557F;
font: 12px Arial;
width:60%;
margin:0 0 0.5em 0.25em;
}
div.boxx label{
display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFF4FF;
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
border-style: solid;
border-width: 1px;
color: #565656;
cursor: pointer;
font-family: Verdana,arial,sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 130%;
margin: 10px 10px 0 0;
padding: 4px 10px 3px 7px;
text-decoration: none;
}
.buttons button {
overflow: visible;
padding: 4px 10px 3px 7px;
width: auto;
}

Answer 2

I know modern CSS people hate tables, but in this case (and with many alignment issues with divs) I recomment a nice little table.
<table>
<tr>
<td>Label1: </td><td><input type="text" /></td>
</tr><tr>
<td>Label2: </td><td><input type="text" /></td>
</tr><tr>
<td>Label3: </td><td><input type="text" /></td>
</tr>
</table>
<input type="button" />

Answer 3

Try something like this http://jsfiddle.net/mmyxD/
Is there a reason for all the margins/padding? Your width's are forcing the elements onto new lines.

Answer 4

You can also use divs and spans. Something like this:
<form action="">
<div class="row"><span class="label">label1:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="row"><span class="label">label2:</span><span class="formw"><input type="text" size="25"></span></div>
<div class="spacer"> </div>
</form>
and css:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 33%;
text-align: left;
}
div.row span.formw input{
width: 100%;
}
div.row span.formw {
float: right;
width: 66%;
text-align: left;
}