CODEWITHSUNDEEP
htmlcss
user2892178
user2892178

Reputation: 61

Aligning text boxes with CSS pushes out labels

I'm trying to align a section of text boxes but allowing labels in between them. Unfortunately they are being pushed aside. I'm sure it might be a css field type I'm unaware of that will handle this but maybe someone could help.

<div id="boxalign2">
            <p>
              <label>Contact Info</label><br>
              <label>Email:</label> <input type="text"/>
              <label>Office #:</label> <input type="text"/>
              <label>Other:</label> <input type="text"/>

              <label>Preferred method of contact</label>
                <select id = "myList">
                    <option value = "1">Email</option>
                    <option value = "2">Phone</option>
                </select>
            </p>

css

#boxalign2 p label{
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}

If the above doesn't show my problem, here is the whole:http://jsfiddle.net/HLLVt/

Upvotes: 0

Views: 501

Answers (2)

cxw
cxw

Reputation: 17041

Remove the float and clear styles and the <p> tags around each label/input pair and they will all line up on one line. See http://jsfiddle.net/HLLVt/7/

Upvotes: 0

DaniP
DaniP

Reputation: 38252

Hi you don't need the float property in your #boxalign2 p label, also you need to manage the width of the labels and the container depends of what you want.

Chek this fiddle http://jsfiddle.net/HLLVt/4/

Upvotes: 1

Related Questions