I wamt to align 2 buttons in a container DIV, but somehow this wont work for me. I put a link of a picture how I want to have it and the JSfiddle so u can have a look. Its important the buttons are always centered (horizontal and vertical, cause this must be a mobile responsive page.
</div><div id="container"><div id="left">
Cancel Confirm
How it looks: http://jsfiddle.net/gzg49xwx/1/
How it should look:
Thanks a lot guys
If you can use flexbox in your project then this demo(http://jsfiddle.net/aatc9gqt/1/) might help you.
Basically, all I did was add display:flex; to your #container and gave your #left and #right divs a width of 50% and some redefined margins.
Disclaimer: Some mobile devices may have issue with flexbox. See what your project requirements are and look here for compatibility. Looks like it is supported in iOS 7.1 and up and Android 4.1 and up
You are floating your two buttons. When that happens they are taken out of the normal content flow. As far as your gray container is concerned they don't take up any space.
To fix this you will need to add what is known as a clearfix to that your gray container can respond to them as if they were not float, that is, taking up space in the container.
I like the micro clearfix by Nicolas Gallagher.
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
Add the clearfix above to your #container.
<div id="container" class="cf"></div>
Checkout your updated jsFiddle: http://jsfiddle.net/gzg49xwx/2/
Here's a list of other clearfix solutions.
I'll let you fiddle with the proper proportions, padding, margin etc.
