Ahmad
Ahmad

Reputation: 13436

Having alignment issues with an input form

I have added a small newsletter subscription text box to the footer of my website, and I'm having some alignment issues.

Form code on its own: http://liveweave.com/hAK1q6

What it looks like on its own:

enter image description here

Footer code after adding form to it: http://liveweave.com/k3L5h7

Switch to Split V or View mode to fully see the Footer preview

Alignment issue:

enter image description here

As you can see, padding appears all screwed up in the background, and the overall form is also not center aligned.

How do I fix this issues ?

Upvotes: 0

Views: 91

Answers (3)

Praveen
Praveen

Reputation: 56539

Add these style in .form-wrapper

margin: 0 auto;
display: block;

Check it here http://liveweave.com/d4cUjW.

screenshot:

enter image description here

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41852

Reduce margin value in margin: 150px auto 50px auto from .form-wrapper class and give float: left or display properties. such as block or inline-block.

Upvotes: 0

Pumpkinpro
Pumpkinpro

Reputation: 847

give your form-wrapper cf `display:block; this will solve (mostly) the appearance problem

and afterwords change some margin and padding of elements

Upvotes: 1

Related Questions