Layout Issue

[tabitha]

My site is here:

http://cartoolconnection.com/index.p...index&cPath=65

As you can see when you scroll down the page, the diamond plate background shows through in the New Products for December section and also in the last few products listed. How can I keep this from happening?

[niccol]

The problem comes from this line in the stylesheet:

#mainWrapper {
	background-color: #262521;
	text-align: center;
	height: 100%;
width: 980px;
	vertical-align: top;
	}

Delete: 'height: 100%;'.

I don't think this is going to cause any problems whatsoever elsewhere in the site but have a good check and let me know if it does.

[tabitha]

Thanks for the reply, Nick. The reason it is at 100% is because I need the main wrapper to extend down the whole page instead of conforming to the main image.

How can I have the columns go the length of the page without having the diamond plate background show through?

Thanks for your help! :)

[stevesh]

While I suggested the thread that led you to add the 100%, the real answer is to have enough content on your site to push the mainWrapper down by itself. More categories and products will fix your site.

[niccol]

OK. Well,looks like I came in half way through this.

As it stands you have mainWrapper inside the body inside the screen (viewport to be technical)

The body is set to 100% height.

The mainWrapper is set to 100%

So the height of mainWrapper is related to the height of the viewport. Which is a bad thing

(If you want to see why it is a bad thing then apply overflow:hidden to mainWrapper. mainWrapper should contain all the rest of Zen Cart. As it stands a whole lot of its contents are sticking out the bottom of mainWrapper)

You can break the chain by removing any of the 100% statements. Then mainWrapper can expand to hold everything that it is meant to contain. Which is a good thing

Evidently there was a reason to put in the 100% height earlier on but it should not be needed now. I would guess that you were trying to make the page work when there was not too much content. As Stevesh says the best way around this is by having more content. (Of course, you could try using min-height but that is fraught with browser compatibility issues.)

(As a separate issue you might ask why, if the background for mainWrapper cuts of at this level, the background for body, which after all is meant to be the same height, does not? That would be a very good question. )

Anyway, the long and the short of it is that I think that if you take out at least one of the 'height:100%' rules then you'll be laughing.

[tabitha]

Thanks for your help guys. I guess the answer is as I feared...adding more content to the first page to make it flow down. I had taken out 100% from different aspects (HTML, mainwrapper, & body) and that'd fix the problem on the products pages, but then I'd have the issue that the front page wouldn't extend to the bottom. So I guess I got to come up with a different page layout to make the first page work. But I guess it's for the best because I need more visuals on the first page anyways. Thanks again!

[niccol]

Again - coming into the conversation late.

I am guessing that the problem is that you want the brown colour to fill the whole viewport even when mainWrapper actually isn't that tall? Is that it?

If it is then the solution is probably to add another div to the layout that floats over mainWrapper that is 100% and remove the 100% declaration for mainWrapper. The footer (or actually a line just below it) would need a clear:both.

That way if mainWrapper is small then the new div will still push the footer down. If mainWrapper is large it will push the footer down. You'll never see the new div itself either way.

You will have to be a bit clever with negative margins so that the footer just shows on the screen - rather than just not showing.

So, yes, if you are going to put more graphics on the home page then that is going to be the most straight-forward solution.