Centering 3 Flexible, Floating Divs Horizontally Inside A Flexible Div Wrapper? Please Help

[GAtkins]

I have done a little bit of looking around, and banging on some code but can’t quite figure it out.

The Pen is here: http://codepen.io/GAtkins/pen/yCmxH

How do I center the the divs inside the green container in a flexible layout?

Any help will be greatly appreciated and thanks in advance.

Glenn

[Paulie_D]

I’ve played with it a bit and it’s quick and dirty as I didn’t have a lot of time.

If you want proper calculations you have to NOT mix percentages and px/em etc. Margins (right and left) can be expressed as % of the width and with the proper box model applied see Pen.

You can just add up the the percentages and make sure they don’t exceed 100%.

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

This might help although I didn’t implement it. https://css-tricks.com/dont-overthink-it-grids/

[GAtkins]

Magic! Very nice. Thank you very much Paulie….

Glenn

[Paulie_D]

I do my best…..:)

[clintmannar]

CSS code for center Div

margin: 0 auto;

Examples… Center Floating Div

Clint

[Author]

Posts