Form css

[keyboard]

I have made a pretty basic form




<form method="post" action="contact.php">
<label for="name">Name:</label><input type="text" name="name" maxlenght="20"><br />
<label for="title">Title:</label><input type="text" name="title" maxlenght="20"><br /><br />
<label for="content">Message:</label> <br />
<textarea name="content" cols="40" rows="7"></textarea> <br />
<input type="submit" name="submit" value="submit">
</form>


and am using this css


label
{
width: 3em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.submit input
{
margin-left: 4.5em;
}

It alligns the name and title but not the content box. I would like it to have them all lined up nicely. Any help?

[david_deseine]

Hi,
A good solution to manage your form layout is to make a class, for instance "myform" that way :


<form class="myform" method="post" action="contact.php">

css : /*change those values according to your needs*/


.myform
{
float: left;
clear: both;
}

.myform label
{
width: 3em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.myform input {
width: 12em;
margin-left: 1em;
margin-bottom: 20px;
}

.myform textarea {
width: 12em;
margin-left: 1em;
margin-bottom: 20px;
}




have fun !

[keyboard]

Thanks for your help. One more thing. How can I allign the submit button with the inputs.


.myform
{
float: left;
clear: both;
}

.myform label
{
width: 6em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.myform input {
width: 12em;
margin-left: 1em;
margin-bottom: 20px;
}

.myform textarea {
width: 15em;
margin-left: 6em;
margin-bottom: 20px;
}

[Deadweight]

where do you want to align them?

[keyboard]

The textbox and inputs are already alligned. I want to have the submit button the same distance from the left of the screen as the other inputs.

[david_deseine]

you have to add a class tou your submit button that way

<input class="mybutton" type="submit" name="submit" value="submit">

then add in css this for example :



.myform input.mybutton {
width: 3em;
margin-left: 1em;


}