Positioning DIVs to the sides of a centered container - css

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

Answer 2

How about that:
Demo: http://jsfiddle.net/insertusernamehere/Ct5BM/
HTML
<div id="master_container">
<div class="ad left">Advertising</div>
<div class="ad right">Advertising</div>
The real content …
</div>
CSS
<style>
body {
width: 100%;
}
#master_container {
position: relative;
width: 960px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
div.ad {
position: absolute;
top: 0px;
width: 200px;
height: 400px;
margin: 0px 0px 0px 0px;
border: 1px solid blue;
}
div.ad.left {
left: -220px;
}
div.ad.right {
right: -220px;
}
</style>
Edit: How it works
When you position the main element relative it's not taken out of its flow within its content but it opens a new space for positioning, z-indexes etc. So a child element within this container which has an absolute position is related to the position of its parent. So in this example the "ad" element has a width if 200px and with left -220px it's moved outside the container on the left side with a little "margin" added.