CODEWITHSUNDEEP
cssformsalignment
Gusgus
Gusgus

Reputation: 353

Position elements on a form using CSS

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

Upvotes: 1

Views: 144

Answers (4)

George Burton
George Burton

Reputation: 1

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">&nbsp;</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;
  }

Upvotes: 0

Keva161
Keva161

Reputation: 2683

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.

Upvotes: 1

Chris Woolum
Chris Woolum

Reputation: 2904

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

Upvotes: 4

Hidde
Hidde

Reputation: 11911

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" />

Upvotes: 1

Related Questions