Grow your CSS skills. Land your dream job.

[Solved] Lightbox overlay conflict with body margin

  • # February 12, 2010 at 8:17 am

    Hello

    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
    emma

    # February 12, 2010 at 4:17 pm

    Try:

    Code:
    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:

    Code:
    body{
    text-align:center
    }
    #wrapper{
    margin:0 auto;
    text-align:left
    }
    Code:

    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.

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