Grow your CSS skills. Land your dream job.

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

  • # October 2, 2012 at 7:43 pm

    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

    # October 3, 2012 at 7:07 am

    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. http://css-tricks.com/dont-overthink-it-grids/

    # October 3, 2012 at 9:19 am

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

    Glenn

    # October 3, 2012 at 9:49 am

    I do my best…..:)

    # March 21, 2014 at 11:27 pm

    CSS code for center Div

    margin: 0 auto;

    Examples… Center Floating Div

    Clint

    # March 22, 2014 at 10:08 am

    Simplified example

    Edit:
    Oh man, just noticed this post is almost 1 1/2 year old.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".