http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/ A Layout forum thread at WPDFD.com en-us 10/02/07, 275 30 2007 2007:%i:1191375029 20:30:29 08/08/08, 221 06 2008 2008:%i:1218229573 16:06:13 http://blogs.law.harvard.edu/tech/rss NineLabs Framework Feed Generator sitemaster@wpdfd.com sitemaster@wpdfd.com http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2099 http://www.msu.edu/~estockab/snd/snd.html and I'm having some problems.

First of all, the formatting is all wrong in Internet Explorer (I use Firefox). So any assistance along those lines would be helpful, as I am not 100% comfortable with my code as it is and I'm not really sure what to change to make it IE compatible.

Second, and more importantly, I wanted to set the container div (the the black div that contains everything else on the page) to run down the middle of the entire page. Right now, it stops after the banner on the top. How can I make it go down the bottom no matter what the screen resolution? I already set the frame on the right to do the same by using the following code on my frame:

border:0px;
position:absolute;

But when I do the same to my container div, it ruins the entire formatting. Any suggestions?

Thank you!

Abby

]]> 10/02/07, 275 30 2007 2007:%i:1191375029 20:30:29 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2099 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2100
I'm relatively new to CSS as well, but after looking at your code, I believe it was the way the two browsers treat the iframe that was causing the problems in layout. Insofar as the black going to the bottom, just create a graphic oh, 1600 pixels wide by one high and paint the part you want black, then set it as a background with: background url (name.ext) repeat fixed;

I'm attaching my version of your CSS (as a text file)--I got rid of the iframe and tweaked a few things and got the two browsers really, really close (I also set header specs in CSS, as IE and FF create default sizes much differently).

Just get rid of the iframe in your index and all should be better.

Hope this helps. If there are any other things we can puzzle out together, let me know at mmband54@gmail.com.

Marat]]> 10/02/07, 275 20 2007 2007:%i:1191385210 23:20:10 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2100 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2102
I've been constantly tweeking for a week and a half or so. And right now, I've got it looking perfect in Firefox (but only for my screen resolution -- 1680 x 1050).

I'm sort of stubborn because I really want to keep the iframe. Especially since I'm so close to perfecting it with it there. And I'm pretty sure it's not posing any issue right now (except for being able to format it in IE).

The only thing now (in Firefox) is centering the container div to any screen resolution. I've researched this and apparently margin-left:auto; margin-right:auto is supposed to do that. But I've tried and it only sticks on the left side when I do that. Right now the left is set at 25% because that works with my resolution but I'd like it to be universally centered. I've also read that sometimes putting text-align:center in the body css and then text-align:left in the container div does this, but it doesn't really and screws up everything in IE.

Further, I'm still struggling in getting it to look the same if not as close as possible in IE. Attaching the container div (and the iframe) to the bottom of the screen with the position:absolute; bottom:0px (or 20 for the iframe) will not work in IE and I cannot figure out why the iframe has a left to right scroll bar as well.

Sorry this is so long winded. Any help is appreciated. Thanks.

Oh, and here is the new link: http://www.msu.edu/~estockab/snd/snddiv.html]]> 10/08/07, 281 59 2007 2007:%i:1191855543 09:59:03 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2102 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2131
After researching a little, I played around on the page with the Web Dev toolbar and I think I have a fix for your CSS. Take a look at this file and let me know if it's what you're looking for.

I was able to center all the content within the browser using margin:0 auto; and thereby get rid of your background image. Then I used height and min-height rules to keep the container div the same height as the browser. I didn't get a chance to check it in IE, but with the better support IE7 provides you shouldn't have too much to work around.

EDIT: fixed the link]]> 10/30/07, 303 55 2007 2007:%i:1193759700 10:55:00 http://www.wpdfd.com/forums/wpdfd/layout/setting_div_to_attach_to_bottom_of_any_screen/#p2131