[Solved] Centering Input Fields

[Kingslayer]

http://codepen.io/anon/pen/qJKes

I have this Example i use the same technique earlier to center text within a div that has 100% width.

Now when i try to center the 2 Form Elements, it does not work. The div that contains them is wider than its content, and i cant figure out where it inherits the width from.

Can someone help me so this centers properly and so that between the 2 input fields is a 50px margin.

[Paulie_D]

You really should be using <label> instead of span.

Wrap each ‘row;’ in a div for a quick solution

http://codepen.io/Paulie-D/full/IoGyL/

[Kingslayer]

would you be willing to show me the proper solution (or give me something to read up on ;)). I am trying to start something like a responsive layout, but having a hard time here.
Also In your codepen another problem shows up text is not with the coresponding box.

(Also why does the parent div in the initial example get the width it has. Nothing that it contains expands to this width ?

[Kingslayer]

@wolfcry911 thx for the solution =) !

Now i wonder why does it start to break so early column_center has a width of 632 px

but if the browser has a width of less than 1000ish pixels it breaks.

[Paulie_D]

That would be partly due to the absolute positioning I guess

Forked

http://codepen.io/Paulie-D/pen/iGHqA

[Kingslayer]

i had this method at first but i have columns where i have text with text align left and they arent centered with this method and also when it breaks its not centered anymore =(

[Paulie_D]

Perhaps you could make your own fresh Codepen (after incorporating some of the ideas here) so we can understand what the issue is but you’d probably just nee dto change some properties in a suitably defined media query

[Kingslayer]

didnt think it would be that much of a problem. will do that. but still trying to figure out some of the stuff on my own ;)

This is what I am trying to do.

http://abload.de/img/exampleaesys.png

This is what i have so far.

http://codepen.io/anon/pen/vhfCd

I know its alot of code, but it does not work without the css reset …

[Kingslayer]

Howdy, still havent found a workarround so that the inputfields stay centered when they are placed underneath each other. Would be happy to to have some input, and does anyone know a could article maybe with some examples about responsive design and coding. I have searched the web found many read many but they contradict each other… =/

[Paulie_D]

Like this…just use a media query.

http://codepen.io/Paulie-D/pen/FeBtd

[Kingslayer]

Thx Paul =) i really appreciate your help !

[Author]

Posts