Layout: Setting div to attach to bottom of any screen

started by on Oct 2, 2007 — RSS Feed

Marat Bandemer Marat Bandemer
Posts: 0

Hi, Abby,

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


mystylesheet.txt - 1.33k

Cesar Perez Cesar Perez
Posts: 0

Hi Abby,

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

You must login to reply