Off centre banner

HTML & CSS
1

Hi All,

I’m struggling to get my head around this. I would like to have a <div id=“wrapper”></div> that sits nicely in the middle of the page…easy right…right. However, I would also like to place a banner to the right hand side just like this site: New Media, Marketing, Advertising & Interactive News & Jobs | NMA.

Any ideas how I go about this?

Many thanks!

2

there are quite a few ways actually. which one you chose would probably depend on the semantics of the banner. for the sake of argument, lets say it’s advertorial content.

i would give your #wrap position:relative; and then the banner position:absolute and left: 100% ( if you ant some more space use margin-left: x-amount or since #wrap is probably a specific amount you can use left: (#wrap width amount)+ (your desired amount);

after that done use top: ( whatever amount) to adjust it’s vertical position.

hope that helps…

3

I will give it a go! - Thanks for your response!

4

It’s not really clear what you mean by “banner”. Which element are you referring to?

5

It’s the right banner that hangs off the side of the page I believe.

We actually had a quiz on this where we eliminated the hanging banner from causing a horizontal scrollbar.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
}
h1, p {
    margin:0 0 1em
}
#page {
    width:760px;
    margin: auto;
    text-align:left;
    background:red;
    position:relative;
    z-index:2;
}
#adholder {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
#adinner {
    width:760px;
    margin:auto;
}
.adright {
    width:160px;
    position: relative;
    margin:0;
    height:600px;
    overflow: hidden;
    background:#52b502;/* for testing */
    z-index:99;
    display:inline;
    float:right;
    left:170px;
}
</style>
</head>
<body>
<div id="adholder">
    <div id="adinner">
        <div class="adright">Advert goes here</div>
    </div>
</div>
<div id="page">
    <h1><a href="#">Centred page content goes here</a></h1>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>
6

Thanks for your responses ralph.m by ‘banner’ - I mean the side banner hanging off the page.

Paul - that worked perfectly! Thanks very much!

7
Off Topic:

Yes, silly me. Didn’t see that. My browser window must have been narrowed. Been messing with it a lot today. Glad the others sorted it for you. :slight_smile: