Static 3-Column Layout w/ Footer

[gldweb]

I am working on a 3-column layout for a Web site that includes a footer and I am getting some strange behavior from the footer.

I have the 3-column layout working fine in IE6, FF, & Opera. But I am having problems inserting a top margin to the footer container. Basically the top margin does not appear in FF but both IE and Opera display it.

Also, I like to place temporary borders around my div containers to see where exactly things line up. Unfortunately, in FF and Opera, the border doesn't appear around my footer container. Instead I get a single line above the container with some weird extra horizantal lines in the margins(?).

Here is the CSS:

* {
margin: 0;
padding: 0;
}

The above is based on a recommendation from SuzyUK for preventing the collapsing margin issue.

#navcontainer {
width: 150px;
padding: 0;
margin: 0;
float: left;
display: inline;
/*border: 1px solid #000000;*/
}

#maincontent {
width: 400px;
padding: 0;
margin: 0 1em 0 2em;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display: inline;
/*border: 1px solid #000000;*/
}
#product_icons {
width: 160px;
padding: 0;
margin: 0;
float: right;
display: inline;
/*border: 1px solid #000000;*/
}

The above are my 3 containers for the columns.

.logo_container {
width: 700px;
margin: 50px 0 40px 40px;
text-align: center;
border: 1px solid #000000;
}

This is the container for the footer. I am clearing the floats by inserting:

<div style="clear:both"></div>

just before the footer container and also after it because I have some images inside the footer container that are floated.

Any insight to what I may be doing wrong and how to correct it would be greatly appreciated.

Thanks

[gldweb]

Okay, I got the border to display correctly around the footer.

There are images displayed horizontally within the footer container. When I commented out the HTML for the images and inserted some text, the border appeared. I then re-inserted the images but added "height: 50px;" to the CSS footer container. Now the border appears just fine.

Although, I am still having problems with being able to insert a top margin to the footer container. I am able to insert left, right and bottom margins but nothing happens in FF when I insert a top-margin.

Any thoughts on this?

Thanks

[gldweb]

I got everything to display correctly in FF, IE and Opera. Here is what I did:

The footer container contains floated images to display horizontally. So based on a thread in this forum titled "Expanding Content Box and Firefox Display Issues" I tried the solution provided by createErrorMsg in that thread. I added a float element to the container div. This provided the ability to display the top margin in FF. But then I ran into an issue with the left-margin in IE6. It was not correctly displaying the margin. In fact it seemed to double the left margin. So based on another thread in this forum (Taking on IE Bugs) I included "display: inline;" in the footer container and now it is displaying correctly in IE, FF and Opera.

And a by product of this fix, I removed the "height: 50px;" from the footer contained and the border still display correctly.

If any of these fixes are incorrect or there are better ways of doing this, please let me know.

Thanks