what is the best practice for aligning html

Question

html code

<div id="signup">
    <p>
        <label>Frist Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Last Name</label>
        <input type="text"/>
    <p>
    <p>
        <label>Email</label>
        <input type="text"/>
    <p>
    <p>
        <label>Mobile Number</label>
        <input type="text"/>
    <p>
    <p>
        <label>Password</label>
        <input type="password"/>
    <p>
    <p>
        <label>Re Password</label>
        <input type="password"/>
    <p>
</div>

and this is css

css

#signup{
    width: 860px;
    background-color: white;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup p label{
    padding: 0.4em;
    color: #0986e3;
}
#signup p input{
    width: 300px;
    padding: 0.4em;
}

if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other ,this is the code in jsfiddle http://jsfiddle.net/Wiliam_Kinaan/EfBD7/

What are you actualy trying ot do? You explain what it does, but not what you're trying to solve? — Robbie, May 12 '12 at 10:53

Joseph · Answer 1 · 2012-05-12T10:59:31.560

Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.

#signup p label{
    display:inline-block;
    width:100px;
}

/*or*/
#signup p label{
    float:left;
    width:100px;
}

If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:

#signup p{
    overflow:hidden;
    zoom:1;
}

score 1 · Answer 2 · answered May 12 '12 at 10:53

1

Give the label a definite width, like:

#signup p label{
  padding: 0.4em;
  color: #0986e3;
  width: 100px;
  display: inline-block;
}

answered May 12 '12 at 10:53

Paul

8,974
3
28
48

score 1 · Answer 3 · answered May 12 '12 at 11:06

1

Can you use table , might help your cause , see the example , sorry for not aligning the markup well.

answered May 12 '12 at 11:06

Priyank Patel

6,898
11
58
88

Nickolas Tuttle · Accepted Answer · 2012-05-12T11:32:31.163

1

Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
    width: 500px;
    background-color: #ececec;
    border:  1px black solid;
    padding: 0px;
    margin: 0px;
}
#signup label{
    font:12px arial;
    color: #0986e3;
}
#signup input{
    margin:10px;
    width: 300px;
    padding 0.4em;
}
#signup input[type=button]{
    margin:10px;
    width: 80px;
    padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
    <input type="text"/>
    <label>Frist Name</label>
    <input type="text"/>
    <label>Last Name</label>
    <input type="text"/>
    <label>Email</label>
    <input type="text"/>
    <label>Mobile Number</label>
    <input type="password"/>
    <label>Password</label>
    <input type="password"/>
    <label>Re Password</label>
    <input type="button" value="click me!" />
</div>

</body>
</html>

edited May 12 '12 at 11:32

answered May 12 '12 at 11:18

Nickolas Tuttle

208
2
10

very beutifull man, but i am wondering how the lables not going on the same line becuse u didn't use P – William Kinaan May 12 '12 at 11:21
1

it is because they are confined to the width of the div, – Nickolas Tuttle May 12 '12 at 11:24
i add a button , when the user clicked it , i want to sumit that values to the database , but please look how the button appear http://jsfiddle.net/Wiliam_Kinaan/BMeAj/3/ – William Kinaan May 12 '12 at 11:27
1

I updated the answer above with the css solution. also here http://jsfiddle.net/BMeAj/4/ – Nickolas Tuttle May 12 '12 at 11:34
really thank you man , i accept ur answer , but the last think , see this http://jsfiddle.net/Wiliam_Kinaan/Vt4jn/1/ the button still in the left :( – William Kinaan May 12 '12 at 11:37
1

Here you go. You have a 200px left margin on your label that needs to go, and set your button margin to what I have. 10px 10px 10px 350px, goes top right bottom left – Nickolas Tuttle May 12 '12 at 11:46
The p's weren't exactly appropriate, but neither is nothing at all, you should probably use a ul and li elements, like so: http://jsfiddle.net/27rBF/. – reisio May 12 '12 at 12:09

what is the best practice for aligning html

html code

css

4 Answers4