CSS issues

Looks good in IE not in Firefox

[RussellC]

I am designing an intranet with css and i have it looking perfect in IE6 and almost perfect in Firefox but not quite yet. I have a main container here:

#container {
background: #C4DAFA;
border: 1px solid #002D96;
padding: 0px;
margin: 50px auto;
width: 754px;
text-align: left;
}

And some divs inside the container like this:

#topbar {
background: transparent url(images/topbar.gif) no-repeat top left;
border-bottom: 1px solid #002D96;
}

#statusbar {
background: #EAE6D3;
border-bottom: 1px solid #002D96;
height: 25px;
width: 754;
margin-top: 0px;
padding: 0px 8px 0px 6px;
}

#menu {
background: #ffffff;
border: 1px solid #002D96;
width: 164px;
height: 400px;
float: left;
margin: 3px 0px 3px 2px;
padding: 0px 0px 0px 0px;
}

#main {
background: #ffffff url(images/main-head.gif) no-repeat top left;
border: 1px solid #002D96;
width: 574px;
float: right;
margin: 3px 2px 3px 0px;
padding: 2px 0px 0px 0px;
}

And a footer:

#footer {
background: #EAE6D3;
border-bottom: 1px solid #002D96;
border-right: 1px solid #002D96;
border-left: 1px solid #002D96;
height: 20px;
width: 740px;
margin: -50px auto;
padding: 0px 8px 0px 6px;
}

The html is generally like this:

<div id="container">
<div id="topbar">&nbsp;</div>
<div id="statusbar">&nbsp;</div>
<div id="menu">&nbsp;</div>
<div id="main">&nbsp;</div>
</div>
<div id="footer">&nbsp;</div>

This works well in IE, the container div goes all the way to the bottom of the page when the main div is filled with content and the footer is always at the bottom. In Firefox, the container div is 0px in height so the footer is right under the statusbar div. It does not stretch when content is put into the main div. Any suggestions? This is my first fully css site. Also, the menu div will not go all the way to the bottom even if i put the height to 100%.

Thanks for the help.

[mipapage]

Two things you can try:

1. Add "clear:both" to your #footer css.
2. try:
<div id="container">
<div id="topbar">&nbsp;</div>
<div id="statusbar">&nbsp;</div>
<div id="menu">&nbsp;</div>
<div id="main">&nbsp;</div>
<div style="clear:both"></div>
</div>
<div id="footer">&nbsp;</div>

That may do the trick...

[RussellC]

mipapage, thanks for the quick reply. If I add the clear:both; then it does put the footer towards the bottom, though not all the way below the main div. However, the container div with the bluish background does not stretch to the bottom still.

[RussellC]

Actually I tried it on a simpler page and it worked. This one with the multiple floating divs still wont work though.

[katana_one]

Just curious, but is this intranet only accessable from within the company? If so, don't all of your users have the same browser? And if that is true, why bother with multiple browser testing?

All of our intranet users are using IE, so when our intranet was set up, we didn't bother checking alternate browsers, since IE is the only browser that will ever be used to view it.

...unless you are going for cross-browser support purely for the practice, in which case, I'll shut up. ;)

[createErrorMsg]

the container div with the bluish background does not stretch to the bottom still.

Remember that floats are removed from the flow, and therefore do not have any effect on the height of their container. In order to MAKE them have an effect on the height of their container, you have to force the container to expand and enclose them.

IE (and Opera) go against specs and automatically do this, but compliant browsers do not. To make FF enclose floats, simply apply a float value to the container itself...

#container{
float: left;
width: WHATEVER;
}

Remember to give it a width slightly larger than the combined width of those two floats, and use fixed width settings (pixels) to ensure that the two floats (one left and and one right) don't stack when the browser is resized.

[RussellC]

Thank you it works but when I float: left it move the page over the the left, but the container div goes all the way to the bottom. Should I make a container for the container?

[createErrorMsg]

Should I make a container for the container?

That's what I'd do. I always wrap everything in a #wrapper div, centered with margin: 0 auto;. That way I have the freedom to float containers, etc. and maintain a centered layout.

[RussellC]

Thanks so much for the help. I have it looking almost identical in both browsers. Just a few more tweaks and I am set. Thanks again.