Problem with div / scrollbar

C

cbuck18

New Member
Hi, I hoping someone could help me out with this problem I have been having. I have a div based layout and the main content is 998px wide. However, I want to have a top to bottom gradient (which I have a 1px wide image repeating), and I want to have two images coming of the side of the main content. However when I put those images in a div and positioned them where I wanted them to be, I realized that they would force a scrollbar. But, for some reason now (as you can see in the pictures) the left image doesn’t force a scroll bar, but the right image does.

I am sure there is probably a better way to do this, but I don’t have very much website experience.

I have included examples, and some of my css/html code. Let me know if you need anything else. Any help would be greatly appreciated. Thanks.

http://imgur.com/KQfc1.jpg
http://imgur.com/UiQ4H.jpg




.bg {
position: absolute;
left: 50%;
}
.bgalign {
height: 100%;
width: 100%;

}
.innerbg1 {
position: relative;
left: -640px;
}
.innerbg2 {
position: relative;
left: 408px;
}
.leaf1 {
float: left;
height: 345px;
width: 234px;
top: 513px;
position: absolute;
background-image: url(images/leaf1.png);
}
.leaf2 {
height: 355px;
width: 234px;
position: absolute;
top: 610px;
background-image: url(images/leaf2.png);


<body>
<div class="bg">
<div class="bgalign">
<div class="innerbg1"><div class="leaf1"></div></div>
<div class="innerbg2"><div class="leaf2"></div></div>
</div>
</div>

//content is down here
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ok way overkill on the use of div tags. This can be done much easier. Here is my suggestion:

Set the body to have the tiled bg image and align it to the top. You also want to set the body bg color for when the window in larger (vertically) than the image height. Use the color from the bottom of that 1px gradient.

Code: 
body {
background:#a5a4a9 url (images/yourTiledBg.png) left top repeat-x;
height:100%  /* fix for early versions of IE, in reference to the watermark div */
}

Then have a div that contains your watermark (leaves). Set this to 100% width and height. We will set the bg to be a certain value from the top (to align it vertically with both you content and so it matches with the gradient from the body). Then we also center align it so its always in the center of the page.

NOTE: set up the leaves in one image and space them apart far enough so they sit on either side of your content area.

Code: 
div.watermark {
width:100%;
height:100%;
background:transparent url(images/leaves.png) center -300px no-repeat;
}

Then you will want to set up a container that holds all of your content and aligns it in the center of the browser window.

Code: 
div.container {
width:998px;
margin: 0 auto;
}

You would then add all your content code inside the container division.
So to wrap up, your markup and css would look like this:

CSS
Code: 
html, body, div {   /* css reset  */
    margin:0;
    padding:0;
}
body {
    background:#a5a4a9 url (images/yourTiledBg.png) left top repeat-x;
    height:100%;   /* fix for early versions of IE */
}
div.watermark {
    width:100%;
    height:100%;
    background:transparent url(images/leaves.png) center -300px no-repeat;
}
div.container {
    width:998px;
    margin: 0 auto;
}

HTML
HTML: 
<body>
    <div class="watermark">
        <div class="container">
            YOUR SITE CONTENT HERE
        </div>
    </div>
</body>
 
You must log in or register to reply here.
Top