CODEWITHSUNDEEP
htmlcss
Tony D
Tony D

Reputation: 47

Regarding a tiling background image that isn't tiling completely

I've been reading this site for a few months, and gotten some great answers by searching. This is my first post, so apologies in advance if I'm not following protocol. :) I've run into something I can't find a working solution for.

I'm making a centered, 2 column, single page site. The left column is for nav, and is fixed. The right (content) column scrolls, and should expand vertically with added content. I've added a drop shadow around the two columns which I'd like to expand vertically with the content div, but it stops at the bottom of the screen. I put a red border around the content div to see if I could find anything obvious. I found that the shadow stops tiling at the bottom of the content div, telling me that the content div isn't expanding. I'd set the height on that div to 100%.

I'm not sure if the problem is related to the height settings, or possibly the positioning I've used. I searched the forums and found suggestions to set the body and/or html height to 100%, which I've done. The shadow is the wrapper div (also set to 100%). Still no go.

At this point, I'm at a loss. It's probably something simple, but I'm just not seeing it. I was going to post the code here, but I didn't want to include irrelevant pieces. At the same time, I'm not sure which pieces ARE relevant. So, here's a link to the page, where the html and css can be viewed: http://modernrelic.com/newsite.html. If it's better to post it here, please let me know and I'll be happy to add it.

Can anyone see what I'm missing?

Upvotes: 3

Views: 108

Answers (1)

Bojangles
Bojangles

Reputation: 101483

Your problem is with the fact that #content is positioned absolutely and floated right. These two properties break it out of normal flow, so you need to remove them.

After having a long mess about with your CSS, there are a few changes you can make to get this working. First, the CSS for #content should look like this with no other properties required:

width: 650px;
margin-left: 350px;

The only other change you need to make is to remove height: 100% from #bg-shadow. That's all I had to change to get it working on Chromium 16 and it's very likely to work on other browsers too.

Upvotes: 1

Related Questions