CSS Forum

**Mikeface** · 04-15-2009, 03:47 PM

Hello,

Can some kind soul here please help me out? I have set up a page and am having a problem with my page viewing properly in Firefox. www.iongeo.com/aram_test_dev

So here is the issue, I have set up my pages that uses a background image and a separate image as the footer.

The background image is aligned to bottom, and the id it's contained in is set at 100% height. I think the issue is that Firefox doesn't support the id to be at 100% height though.

Can someone take a look at my page and perhaps let me know if there is a way to work around my issue?

I am very open to suggestion, any help would be GREATLY appreciated.

Thanks,
Mike

**vangogh** · 04-15-2009, 04:59 PM

Could you post an image of how you want it to look. I don't have IE readily available. I think I know what you want, but an image would help.

If I am right in how you want it to look I think the main issue is that the overall structure should be improved. It looks more complicated than it needs to be.

**Mikeface** · 05:09 PM

Thanks for the reply.

Here's a screenshot of how it looks in IE:http://www.iongeo.com/aram_test_dev/aram_screenshot.jpg

Yeah, if you can suggest an easier way to get it to look correct, I am really open for anything.

I can also post my css and html if you would like.

Thanks,
Mike.

**vangogh** · 04-16-2009, 02:16 PM

Thanks Mike. That's how I thought you wanted it to look. Here's how I would set up the basic structure

HTML

HTML Code:

<body>
<div id="wrapper">
	<div id="header">
	</div>
	
	<div id="sidebar-left">
	</div>
	
	<div id="content">
	</div>
	
	<div id="sidebar-right">
	</div>
	
	<div id="footer">
	</div>
</div>
</body>
</html>

CSS:

Code:

#wrapper {width:725px margin: 0 auto}
#header {}
#sidebar-left {float:left; width:175px}
#content {float:left; width:375px}
#sidebar-right {float:left; width:175px}
#footer {clear:both}

I'm guessing at the widths a little so you'll probably need to adjust them. Clearing the footer should then have things lining up how you want. You may need to add overflow: auto to the #wrapper div, though you shouldn't need to.

Then you can place all your content inside each of the divs above.

**Mikeface** · 04-16-2009, 03:37 PM

Thanks a lot for the response Van Gogh.

Your example helped get me on the right track, where I added overlay:hidden; to my content id which fixed the problem in firefox so I think everything is OK now.

The clear function for my floated divs helped out I think as well.

Where in Boulder are you from? I am from Littleton and and live in Denver now.

**vangogh** · 04-16-2009, 04:24 PM

Cool. Glad I could help.

I hadn't realized we were practically neighbors. I'm on the east side of town now near Foothills. I'm originally from New York, but moved out here almost 12 years ago.