cbuck18
30 Apr 2010, 05:02 PM
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/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
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/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