Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Center 2 DIVS side by side in wrapper?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43233
    Rugg
    Participant

    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

    #127413
    CodeGraphics
    Participant

    Check this[ pen](http://codepen.io/alex13/pen/dJKcu “”).

    #127416
    noahgelman
    Participant

    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](http://cdpn.io/dJKcu “Code”)

    #127419
    Merri
    Participant

    I forked it further (to clean up and to simplify it): http://codepen.io/Merri/pen/vHJtf

    #127422
    Kitty Giraudel
    Participant

    Here is a flexbox version (modern browsers only): http://jsfiddle.net/wqD62/.

    #127510
    noahgelman
    Participant

    @Rugg

    Yeah, sorry for wrong link.

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

    http://codepen.io/anon/pen/oCvxE

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘[Solved] Center 2 DIVS side by side in wrapper?’ is closed to new replies.