Positioning DIVs to the sides of a centered container

Question

I have a main container DIV for the content of my page, that is horizontally centered:

HTML:

<div id="master_container">
  .. my content here ...
</div>

CSS:

#master_container {width: 960px; margin: 0 auto;}

Client wants to have adverts at both sides of the page, outside of the master_container. I tried various CSS to try and position those divs but when window is resized, they overlap with the master_container. Also, I am asked to have them float when the page is scrolled.

Can anyone please direct me to the correct solution? Thanks in advance...

Answer 1

>> DEMO <<

[Note that I used a 700px width for #master_container]

1. Positioning

Most important CSS is the styling and positioning of the adverts, which I have given the class .advertis:

.advertis {
    position: fixed; /*creates floating effect */
    top: 20px; /* divs will always stay 20px from top */
    width: 220px;
    padding: 10px;
    background: white;
    border: #ccc 1px solid;
    border-radius: 4px;
}

#left {
    margin-left: -613px; left: 50%; /* positioning of left ads */
} 

#right {
    margin-right: -613px; right: 50%; /* positioning of right ads */
} 

I can hear you wonder: how do I calculate the margin that I need? Simple:

Get width of #master_container (including padding) = 720px. Divide it by 2 = 360px. Add the width of the ad (including padding and border) = 242px. 240px + 360px = 600px. Add the space that you want to have between the container and the ad = 11px (in my case).

242px (full width of ad) + 360px (half of container) + 11px (space between ad and container) = 613px (margin needed)

2. Hiding when window too small

Now you want to hide the ads when they don't fit in the window any more. You have options for that:

• Media Queries
• jQuery (or JavaScript or another of its libraries)

In the first jsFiddle I have used media queries (not supported by all browsers). In this Fiddle, I have used jQuery to get the same effect.

function widthCheck() {
    var ads = $(".advertis");

    if ($(window).width() < 1225) {
        ads.hide();
    }
    else {
        ads.show();
    }
}

widthCheck(); // Execute onLoad

$(window).resize(function(){
    widthCheck();  // Execute whenever a user resizes the window
});

​

It's up to you to choose which one you want to use. I'll list a few pros and cons, so you can choose for yourself.

Pros media queries:

• modern, progressive
• works, even when JS is disabled

Cons:

• not supported by all browsers

Pros jQuery:

• supported by (as good as) all browsers

Cons:

• does not work when JS is disabled
• not as progressive as media queries