Inline-block property not displaying as intended in Firefox or Explorer

HTML & CSS
1

Would someone please help?

I’m trying to do some final layout of a responsive website that is viewed consistently across browsers/devices.

I can’t figure out what I need to add to my css to make FIREFOX and EXPLORER display my footer at the bottom (as it does correctly in Chrome, Safari, Android, iPhone & iPad) instead of over my “slider” image. I’m using display property INLINE-BLOCK which works great at keeping my sidebar to the right and top of my main content and the footer at the bottom in most viewing environments. But it doesn’t work that way in Firefox or Explorer.

If I could just fix this, I would be FINALLY DONE with this website! I need to be done!

This is the link to the site:
http://e4c.1f8.myftpupload.com

Any ideas or common solution would be so appreciated. It’s probably something simple, but I’m missing it. Thank you.
Tanya

2

Try adding this:

#main {overflow: hidden;}
1 Like
3

Oh my gosh! You are a GENIUS! Thank you soooo much. I just couldn’t get it figured out. Looking too long at code can make a person blind. Thank you.

4

You’re welcome! You just needed to get your container to wrap around its content. :slight_smile:

1 Like