Treehouse: Grow your CSS skills. Land your dream job.

center a responsive div

  • # June 19, 2012 at 2:12 pm


    I am trying to center a div in my first responsive layout

    You can see a test page here:

    I would like to center my content, but I guess the position:absolute doesn’t work when the div doesn’t have a fixed width…

    Hope you can help


    # June 19, 2012 at 2:54 pm

    The width of div is determined by the column number.

    If you change this to twelvecol rather than ninecol it gets centered but wider.

    # June 19, 2012 at 3:20 pm


    I just thought of a solution.
    I would like to have a slimmer centered column. So why not add an empty column on the side?

    seems to work


    # June 19, 2012 at 3:24 pm

    That you can do but it’s a failing of this grid system (as far as I can see) that you have to add empty divs to center a column.

    Also, since this is a 12 column grid system, I would suggest making the middle div either 8 or 10 cols wide with 2 or 1 on either side…it’s ugly coding but it will work.

    Whether you could tweak the margins of the ninecol to center it might also be a better thought.

    # June 19, 2012 at 3:29 pm

    I agree that it is not totally clean to use an empty div

    I hope that I will figure out a better solution, but for now it works


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

You must be logged in to reply to this topic.