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; 
}