How do I fix banners to the side of the browser window?

D

dragos_2p

New Member
hello all
I have a "question" about how to use absolute and relative positioning.
Actually i want to add 2 banners (ads) on may web site, outside the "container". Where the container is the very first div of my site, containing all divs.

The website width is 1000px, and when i'm opening the site in a bigger resolution i want to see the banners in the left and right, but without affecting my content. If the resolution is not big enough the banners have to sweep under the content ("container" div).

As far as i know i have to use absolute and relative positioning. i found few ways to do that but in other browsers like ie, chrome, safari i meet some problems.

I've seen few website with banners positioned like these, so there must be a way to do that. Can anyone help me with this?
tks in advance and sry for my English :)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
In this case I recommend you use "fixed" position. This does exactly what it says, fixes (sticks) an element to a certain position regardless of the flow of the document.

Positioning
You mentioned you wanted to position two banners: one on the left and right of the browser window (outside your "container" div element). You could use absolute position for this but I think fixed is a better solution. Here is an example:
HTML: 
<div id="banner1">Left Fixed Banner</div>
<div id="banner2">Right Fixed Banner</div>
<div class="container">
....
</div>

Code: 
div#banner1, div#banner2 {
position:fixed;
top:45px;  /* DISTANCE FROM TOP OF WINDOW */
}
div#banner1 {
left:0;   /* FIXES BANNER TO LEFT SIDE OF WINDOW */
}
div#banner2 {
right:0;   /* FIXES BANNER TO RIGHT SIDE OF WINDOW */
}

Stacking Order (z-index)
You also want them to reside behind the main content of the site in the event the width of the browser window is less than that of the container div. To do this you will need to use z-index. Think of "z-index" and layers. By default everything is set on layer 1. To move an item to a different layer, you need to define the "z-index" property for that element. NOTE z-index will NOT be recognized on elements that have a position of static (default setting). This means if your "container" div does not have a defined position you will need to set one. Use "relative" position.

So the CSS would look like this:

Code: 
div.container {
position:relative;
z-index:2;  /* PLACES THIS DIV ONE LAYER HIGHER */
}
div#banner1, div#banner2 {
position:fixed;
z-index:1;  
top:45px;  /* DISTANCE FROM TOP OF WINDOW */
}

Good luck, hope this helps and let us know if you get confused
 
Last edited:
You must log in or register to reply here.
Top