By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,852 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,852 IT Pros & Developers. It's quick & easy.

Divs fall off edge of the page?

SamKL
P: 27
Okay, here's the page in question.

http://www.rockymountainpond.com/metal/examples.php

I had it working fine in IE, in which the main background would extend all the way to the bottom even with the pictures in there, though it never worked right with FF or Opera.

Now for some reason I messed something up in the code and I can't get it to work in IE anymore...

Here's the CSS

Any ideas? I have wrestled with it for a couple hours now and my shift is about to end, so any help by morning would be appreciated. Firefox and Opera just don't seem to like the idea of height 100% doing what it's SUPPOSED to do. =P
Oct 2 '06 #1
Share this Question
Share on Google+
10 Replies


drhowarddrfine
Expert 5K+
P: 7,435
IE is doing what you want but IE is not performing correctly, as usual. This is a bug in IE and frustrates many developers. Parent divs are NOT to expand to enclose floated content but IE does it anyway. Firefox and Opera and every other browser does get this right.

To get modern browsers, ie not IE, to do what you want, add overflow:auto; to your #frame div.

In addition, IE struggles with height, not the other browsers. More problems are caused by the use of height in IE than any other.
Oct 2 '06 #2

SamKL
P: 27
Well that did what I wanted it to do, but now there's an unsightly scrollbar enclosing around the #frame div.
Oct 3 '06 #3

drhowarddrfine
Expert 5K+
P: 7,435
Because you specified the height of the frame as 100%. Remove that.
Oct 3 '06 #4

SamKL
P: 27
Aha! Genious! Thanks, it looks great now =]
Oct 3 '06 #5

SamKL
P: 27
Actually now the only thing I'd like to figure out is how to get the #frame div to expand the entire height of the window, not just 100% of the content.

I've tried looking for a lead on how to do this (again, I had it working in IE7, somehow...then lost it) but no matter what I tried, Firefox and Opera both would not do it. It seems like yeah, neither of those browsers follow the same rule as IE was previously. If there is a hack around this can anyone point me in the right direction?

It's either that or just give #frame a fixed height of like... 2000 =X
Oct 3 '06 #6

drhowarddrfine
Expert 5K+
P: 7,435
Always remember that IE, including the new IE7, do a lousy job of following the standards while Firefox and Opera do a very good job of it. Do not expect code that does what you want in IE to work elsewhere because IE is just that bad. Always get your code working in FF or Opera first. Then adjust for IEs quirks and bugs.

I do not know what you mean about the full height of the window and not the content.
Oct 4 '06 #7

SamKL
P: 27
Always remember that IE, including the new IE7, do a lousy job of following the standards while Firefox and Opera do a very good job of it. Do not expect code that does what you want in IE to work elsewhere because IE is just that bad. Always get your code working in FF or Opera first. Then adjust for IEs quirks and bugs.

I do not know what you mean about the full height of the window and not the content.
The background, #frame div, I want that to extend to the bottom of the page, but it only appears to go as far as the content does on the page. That is, where the text/images, whatever stops, is where the #frame div stops, leaving blank space at the bottom where the background shows through.

height: 100% apparently only means 100% of the visible content on the page, and not 100% of the viewport.

I do design and check my work in FF first, always, but I figured maybe IE actually did something right this time. Silly me.
Oct 4 '06 #8

drhowarddrfine
Expert 5K+
P: 7,435
It does go to the bottom from what I can tell. I changed the background color and it hits the bottom for me. I guess I don't know what you mean by 'the bottom of the page'. It already scrolls to get further down but you want it to go further?
Oct 4 '06 #9

SamKL
P: 27
It does go to the bottom from what I can tell. I changed the background color and it hits the bottom for me. I guess I don't know what you mean by 'the bottom of the page'. It already scrolls to get further down but you want it to go further?
Ah, wait my mistake. Go to the HOME link at the top of the page.

It appears fine right now because there is content filling the entirety of the page, but as you can see on the HOME page, it stops after the header. The thing here is, I'm not entirely sure I'd have enough content on that page to make the div stretch to the bottom like the one I got on the gallery to.
Oct 4 '06 #10

drhowarddrfine
Expert 5K+
P: 7,435
Add height:100%; to #frame.
Oct 4 '06 #11

Post your reply

Sign in to post your reply or Sign up for a free account.