CODEWITHSUNDEEP
htmlcss
user1
user1

Reputation: 357

CSS aligning text boxes with labels

My fiddle pretty much shows the problem. Trying to get the labels to be on the left side of each text box if anyone could help. http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

css

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}

Upvotes: 6

Views: 49562

Answers (4)

Aravin
Aravin

Reputation: 7097

<!DOCTYPE html>
<html>
<head>
    <title>Centering a form</title>
</head>
<body>
    <div class="form">
        <label>Name</label>
        <input type="text" name="name">

        <label>Email</label>
        <input type="text" name="email">

        <label>Phone</label>
        <input type="text" name="phone">
    </div>
</body>
</html>

<style type="text/css">
    .form {
        margin: 0 auto;
        width: 210px;
    }
    .form label{
        display: inline-block;
        text-align: right;
        float: left;
    }
    .form input{
        display: inline-block;
        text-align: left;
        float: right;
    }
</style>

Demo here: https://jsfiddle.net/durtpwvx/

Upvotes: 0

DaniP
DaniP

Reputation: 38262

You can give to your div .boxalign2 and label fixed widths.

View the demo http://jsfiddle.net/HC64Y/11/

.boxalign2 {
  width:400px;
}

label {
  text-align:right;
  padding-right:20px;
  display:inline-block;
  min-width:150px;
}

Upvotes: 1

Jeff B
Jeff B

Reputation: 30099

You are making your inputs inline-block, but you are also floating them to the left.

If you remove the float: left and add <br> after each input, you will get the correct behavior.

http://jsfiddle.net/A8es3/

To align the boxes, add a div wrapper around each label/input, make your label inline-block with a fixed width. There are other ways to do this as well, but this is one way.

http://jsfiddle.net/A8es3/1/

As stolli mentioned, you can also simply use the label element as the wrapper:

http://jsfiddle.net/A8es3/2/

Upvotes: 8

stolli
stolli

Reputation: 5946

To ammend Jeff B's answer to get your result, simply give the elements a width in your css

label {width: 100px} where '100' is whatever value looks best for your layout.

Also, remember that the primary purpose of labels (as opposed to just div's or span's for labeling) is that labels act as a secondary click target for the control they are associated with. Therefore, you can wrap your elements in the label tag (<label><input /></label>) or associate them by id (<label for="foo"><input id="foo"/>) and give the user much more to click, simply by clicking the label, they can toggle the control, focus the text input, whatever. A big boon in usability for touch devices.

Upvotes: 0

Related Questions