Get a free trial // Grow your CSS skills // Land your dream job

[Solved] Lightbox overlay conflict with body margin

  • # February 12, 2010 at 8:17 am


    I am centering my website using margin: 0 auto; on the body. When I decided to use a lightbox on my site the neat dark overlay effect didn’t cover my entire screen. I read somewhere that this is because of the margin set on my body tag and as expected the problem was solved when I got rid of my side margins.

    Is there another way of centering my site without affecting the lightbox overlay?

    Many thanks

    # February 12, 2010 at 4:17 pm


    html { text-align: center;}

    body { text-align: left;}

    That will line everything up just like margin:0 auto and shouldn’t affect the lightbox overlay

    # February 13, 2010 at 7:19 pm

    But that only works for IE right?

    # February 14, 2010 at 4:45 pm

    older ie browsers dont center the page using margin:0 auto but instead using text-align center. so using both rules will be the best solution. That way page is centered in every browser. But use margin 0:auto for your wrapper div.
    It should look something like this:

    margin:0 auto;

    all content here

    this wont affect your lihtbox overlay

    # February 16, 2010 at 5:25 pm

    Ah of course :) Thank you tafkanator

Viewing 5 posts - 1 through 5 (of 5 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