CSS displays differently in IE and Firefox

I am attempting to program a stylesheet, but am running into problems with Firefox.  Everything displays as I'd like in Internet Explorer 7, but not in Firefox 2.
- The first issue in Firefox is that the "width" attribute doesn't seem to be coming through.  No matter what I put the width at (10%, 40%, 50%) the contentL and contentR boxes appear the same.
- The second issue is that the footer (green in the attached code) is displayed directly below the menu (blue) instead of at the bottom of the page.
Both of these are fine in Internet Explorer.  Is there an issue with my code or is it with the Firefox browser?
Thanks in advance!!!

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#menu
{
	padding: 10px 0 12px 0;
    width: 100%;
    background-color: blue;
}
#footer
{
   	width: 100%;
   	height: 10px;
	background: green;
}
#leftborder {
	float:left;
	padding:0 0 0 11px;
	background:#000000;
}
#rightborder {
	float:right;
	padding:0 11px 0 0;
	background:#000000;
}
DIV.container
{
	background:#ffffff;
	width:42em;
}
DIV.content
{
	background:#ffffff;
	border-left:3px solid #AAAAAA;
	border-right:3px solid #AAAAAA;
}
div.contentL
{
	float:left;
	width:40%;
	padding: 20px;
	background:#FFFFFF;
	color:#000;
}
div.contentR
{
	float:right;
	width:40%;
	padding: 20px;
	background:#FFFFFF;
	color:#000;
}
</style>
</head>
<body>
<div id="menu">
</div>
<center><div class="container">
<div id="leftborder">
<div id="rightborder">
<div class="content">
<div class="contentL">
Left column
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
</div>
<div class="contentR">
Right column
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
<br>abc
</div>
</div> <!--content-->
</div> <!--rightborder-->
</div> <!--leftborder-->
</div> <!--container--></center>
<div id="footer">
</div>
</body>
</html>

Open in new window

rhaakAsked:
Who is Participating?
 
TNameConnect With a Mentor Commented:
Hi, you could try this:

First, give the document a (valid) doctype! E.g.
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

then clear the floats for div.content and div.container, e.g. by assigning
   overflow:hidden;
for both.
Also, give div.content a width, e.g.
  width:40em;
div.container 
{
        overflow:hidden;
        background:#ffffff;
        width:42em;
}
div.content
{   
        overflow:hidden;
        width:40em;
        background:#ffffff;
        border-left:3px solid #AAAAAA;
        border-right:3px solid #AAAAAA;
}

Open in new window

0
 
rhaakAuthor Commented:
Thank you!  I haven't quite figure out the overflow concept yet (obviously).  I appreciate the help!
0
All Courses

From novice to tech pro — start learning today.