0

I have the next issue with my CSS styling:

http://s8.postimg.org/p26jl39fp/Screenshot_571.png

I want to align the inputs (which each input placed in own div) in the middle of my form.

The HTML markup for the form:

http://ideone.com/lWYswC (just posted the form content without doctype etc, because webpage doesn't have other divs and this code block is the only in body of my html document).

CSS styling for it:

http://ideone.com/w97FzB

html & body are defined by default with the width/height = 100%

html, body
{
    width: 100%;
    height: 100%;
    ...

The screenshot from the devtools of Chrome browser:

http://s8.postimg.org/azq6a53t1/Screenshot_572.png

As you see, the inputs have crossed the div size, I don't know why.

Also I'm using bootstrap library for the UI, it's also included in project. But as I viewed the source of bootstrap, they didn't use any alignment properties for their controls. They just have some CSS-styling for border radius and blue highlighting.

How can I fix this issue?

Thanks

1 Answers1

0

Really simple:

input { margin: 0 auto; display: block; }
MrBoolean
  • 601
  • 7
  • 13
  • I'm newbie with CSS styling, very weak knowladge :) –  Jun 23 '13 at 19:08
  • Here is a simple example on jsfiddle: http://jsfiddle.net/RA9KW/ Mark my post as correct if the answer works! – MrBoolean Jun 23 '13 at 19:08
  • The parent element needs a width. – MrBoolean Jun 23 '13 at 19:10
  • I don have a width in parent, the last version of CSS I've used: http://ideone.com/IXmVYT PS: the width element was also in the question's content –  Jun 23 '13 at 19:15
  • Please, look at new screen, I've highlighted the element in devtools from Chrome: http://s8.postimg.org/azq6a53t1/Screenshot_572.png –  Jun 23 '13 at 19:19
  • try to add the class "clearfix" to the highlighted container. – MrBoolean Jun 23 '13 at 19:22