Search code examples
csshtmlpositioning

Detecting screen resolution

I came across the website http://www.swiftkey.net.

On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.

How do they acheive this effect?

Using firebug, I was able to decipher what I think MIGHT be doing this:

.w1 {
    float: left;
    width: 1600px;
    position: relative;
    left: 50%;
}
.w2 {
    float: left;
    width: 1600px;
    position: relative;
}

I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.

Solution

  • I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:

    Sample Screenshot 1 Sample Screenshot 2

    The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:

    #wrapper {
    max-width: 1000px;
    margin: 0 auto; //centers a block element
}

    The grey bars are created by having a background color on the <body> or <html> elements:

    body {
    background-color: #888;
}

    I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.