PDA

View Full Version : Newbie CSS/HTML: How to add ad in a div container to the side of the page?



wellenreitr
Oct 12th, 2009, 08:11 PM
Hello, i got an centered website with a fixed width. Now i want to add an ad banner of fix width/height to the right side of the page. There is a wrapper div of width 700px. But i can't get my banner on my side. I dont know why. Can someone help me please with my css id? i got:

<div class="wrapper">
<div class="head"></div>
<div class="content"></div>
</div> //wrapper
http://img237.yfrog.com/img237/5857/csse.gif
This is what i want. I got the orange one. I dont want to set the banner position to the right browser border. It shout be near thw wrapper class.

met
Oct 12th, 2009, 08:20 PM
#main-wrapper {
width: 850px
/* Width of #wrapper + width of
#advert-column + margin/padding */

margin: auto;
position: relative; /* important */
}

#advert-column {
width: 150px; /* change this but be sure to update #main-wrappers width */
position:absolute;
/* you can change these top/right values, or add left/right margins*/
margin-top: 5px;
top:0;
right:0;
}

<div id="main-wrapper"> <!-- start #main-wrapper -->

<div id="advert-column">
<!-- your adverts -->
</div>

<!-- your existing code -->
<div id="wrapper">
<div id="head"></div>
<div id="content">
<!-- content -->
</div>
<!-- end existing code -->

</div> <!-- end #main-wrapper


this is just one way of doing it.

absolutely positioning a column inside a main-wrapper div that contains the "wrapper" div AND the adverts.

wellenreitr
Oct 12th, 2009, 08:57 PM
this is just one way of doing it.

absolutely positioning a column inside a main-wrapper div that contains the "wrapper" div AND the adverts.

The problem is, i want to center the main part of the page / 2. And with this solution i get the center of the page (mainpart+ad)/2

http://img237.imageshack.us/img237/7968/csserror.gif
The center is not longer in the middle of all, u know?

met
Oct 12th, 2009, 11:34 PM
Hmm i see what you mean

if the adverts are a fixed size, and the content does not change width you could position it absolutely to the body...not sure that would be ideal though.

tspek
Oct 12th, 2009, 11:37 PM
The problem is, i want to center the main part of the page / 2. And with this solution i get the center of the page (mainpart+ad)/2

http://img237.imageshack.us/img237/7968/csserror.gif
The center is not longer in the middle of all, u know?

Well, you would have to change the size of everything else then to compensate for the width of the ad. Just reduce the width of wrapper, head & main by the width of the ad, and center them. Tada...it's all centered again.

wellenreitr
Oct 13th, 2009, 12:34 AM
I had to do an outer wrapper
size-of-ad-left (blank) main-wrapper +size-of-ad-right(ad itself)
But for this solution i have to know the size of the ad :-(