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

[Solved] Center 2 DIVS side by side in wrapper?

  • # March 8, 2013 at 1:54 am


    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:

    Thank You

    # March 8, 2013 at 2:06 am

    Check this[ pen]( “”).

    # March 8, 2013 at 2:17 am

    This reply has been reported for inappropriate content.


    Awesome… and thank you

    # March 8, 2013 at 2:18 am

    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.

    []( “Code”)

    # March 8, 2013 at 2:42 am

    This reply has been reported for inappropriate content.


    your pen seemed to be the same as posted above…I’m assuming this is what you were referring to…

    # March 8, 2013 at 2:56 am

    I forked it further (to clean up and to simplify it):

    # March 8, 2013 at 3:40 am

    Here is a flexbox version (modern browsers only):

    # March 8, 2013 at 1:47 pm


    Yeah, sorry for wrong link.

    Here below is a much more optimized version. Less CSS.

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

The topic ‘[Solved] Center 2 DIVS side by side in wrapper?’ is closed to new replies.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed