CODEWITHSUNDEEP
htmlformsxhtmlcss
dragonfly
dragonfly

Reputation: 3227

input fields alignment issues

input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??

the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news

Upvotes: 1

Views: 1173

Answers (3)

Hussein
Hussein

Reputation: 42818

You have overdone your CSS and have many unneeded properties. Start by giving your label the following CSS properties, then style the inputs as you wish.

label {
    width: 100px;
    display: inline-block;
    margin: 2px 6px 6px 4px;
    text-align: right;
    font-weight: bold;
    color: #555;
}

Check working example at http://jsfiddle.net/6Eyef/1/

Upvotes: 3

Arjen
Arjen

Reputation: 1321

I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:

display: block;
float: left;
width: (a value)px;

And you need to add clear: left to the <input> elements

Edit: Hussein's answer is better

Upvotes: 0

asharajay
asharajay

Reputation: 1193

Its ok if you use..

margin-left: -220px;
margin-top: -150px;

for info Div.

thank you.

Upvotes: 1

Related Questions