CSS 100% width and height layout, small background img issue

Hey everybody! This is my first post, and I just want to say I am glad to find a group of people willing to help when these problems come up.

I just finished doing the CSS for my new website, and there's a small problem. Here's the layout URL:

http://www.gofizbo.com/listing/

It should look almost identical in IE(6+) and Firefox. It's 100% height and width, and fluid. I did, however, set a minimum width because I have two columns on float, and if the browser is made too small, it pushes the right DIV contents (the house picture) down and out of the flow. Anyways...

The layout works until you resize the browser window and the scrollbars show up. It's a very strange issue I can't quite understand. I was hoping somebody here could help me out with this. I took two screenshots to show what's going on...

http://www.gofizbo.com/listing/messup1.jpg
http://www.gofizbo.com/listing/messup2.jpg (http://www.gofizbo.com/listing/messup1.jpg)

As you can see, the top background (the dark grey) and the side background (the orange on the right and left, and the light gray on the right) just stop at the point you can't see without scrolling. I'm not sure that makes sense, but it seems that the DIVs aren't actually stretching 100% of the page. The backgrounds are only extending the size of the browser, NOT the actual page. Once you start scrolling, you can see the backgrounds aren't there.

For the 100% height, I set the html, body, and div's to 100%. It seemed to work like a charm until I filled the page up enough to see scrollbars. For the 100% width (top part), I just simply set the top DIV to 100% width...simple enough, right?

I hope this all made sense. Let me know if you have any questions or want me to clear something up. Any help would be greatly appreciated. Thanks!

Alex

That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

I have a full height solution that works here. (http://nopeople.com/CSS/full-height-layout/)

One tip I can give you - make your yellow border background image (leftrightbgorange.gif) of 1 px height!

That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

I have a full height solution that works here. (http://nopeople.com/CSS/full-height-layout/)


Okay thanks! I'm going to try to redo the layout with the 100% height link you sent me.

Any idea why it's affecting the width as well though? Setting a DIV as 100% width, I thought, did the job with no problems.

but it seems that the DIVs aren't actually stretching 100% of the page. The backgrounds are only extending the size of the browser, NOT the actual page.
That's exactly what 100% is though. One width or height of the browser window.
To fix your header so it goes the full width with or without scrollbars, remove any width statement.


Oh yeah, $215,000 for that house had me ready to sell out and move to Florida :eek: Too funny:D

I have a full height solution that works here.

Very useful. I have added it to my Sources list.:thumbsup:

Frank

http://exitfegs.co.uk/Sources.html

That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

I have a full height solution that works here. (http://nopeople.com/CSS/full-height-layout/)

Alright, I fixed the width part of the problem. What's the difference between what I'm doing and your fix? I noticed there's no "height=100%" set anywhere except in the IE version for the #wrap DIV. I'm curious...what makes it work? The min-height? But then why does it work in IE? Because I'm having problems with IE too. Thanks for everything so far Excavator.

I'm curious...what makes it work? The min-height? But then why does it work in IE? Because I'm having problems with IE too. Thanks for everything so far Excavator.

The min-height makes it work in newer browsers and the *html {height:100%} makes it work in IE6. That's the star hack I think?