I'm having issues with what appears to be an extremely simple problem. I just can't seem to wrap my head around this for some reason. Essentially…Im trying to position two centered divs, side by side in a wrapper. I've been able to center the divs, but they are stacking instead of sitting next to each other. I've tried using float:left and display:inline-block…neither solving the issue. If anyone can suggest a solution for this…I'd be ever so grateful.
Here is a better version of @CodeGraphics code but without the extra html and unnecessary css. You dont need so much code for a simple thing.
Simply put, if you have a div, and the elements inside are set to "display:inline-block" then you can just use "text-align:center" to center them inside. Then reset the "text-align:left" inside the box.
Hello,
I'm having issues with what appears to be an extremely simple problem. I just can't seem to wrap my head around this for some reason. Essentially…Im trying to position two centered divs, side by side in a wrapper. I've been able to center the divs, but they are stacking instead of sitting next to each other. I've tried using float:left and display:inline-block…neither solving the issue. If anyone can suggest a solution for this…I'd be ever so grateful.
Code sample: http://jsfiddle.net/TZj6B/6/
Thank You
Check this pen.
@codegraphics
Awesome… and thank you
Here is a better version of @CodeGraphics code but without the extra html and unnecessary css. You dont need so much code for a simple thing.
Simply put, if you have a div, and the elements inside are set to "display:inline-block" then you can just use "text-align:center" to center them inside. Then reset the "text-align:left" inside the box.
http://cdpn.io/dJKcu
@noahgelman
your pen seemed to be the same as posted above…I'm assuming this is what you were referring to…
http://codepen.io/anon/pen/CGwgn
I forked it further (to clean up and to simplify it): http://codepen.io/Merri/pen/vHJtf
Here is a flexbox version (modern browsers only): http://jsfiddle.net/wqD62/.
@Rugg
Yeah, sorry for wrong link.
Here below is a much more optimized version. Less CSS.
http://codepen.io/anon/pen/oCvxE