The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    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.


    # 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%.

    This might help although I didn’t implement it.

    # October 3, 2012 at 9:19 am

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


    # 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


    # March 22, 2014 at 10:08 am

    This reply has been reported for inappropriate content.

    Simplified example

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed