Grow your CSS skills. Land your dream job.

center a responsive div

  • # June 19, 2012 at 2:12 pm

    Hi

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

    You can see a test page here:

    http://www.tingen.dk/wp

    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

    Best
    Simon

    # 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

    Yep

    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

    Thanks

    # 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

    Thanks

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

You must be logged in to reply to this topic.

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