No replies
seanboy
Offline
newbie
Scotland
Last seen: 12 years 12 weeks ago
Scotland
Joined: 2009-10-01
Posts: 1
Points: 1

Hi

I am creating a page structure for a site I am creating. The structure is a classic header, 3 column content and footer. This is all centred and a fixed height. Additionally I want to have an additional column running down the right side, the entire length. I have successfully done this in firefox but in IE the right column is appearing below the footer.

Any help /advice would be really appreciated.

Thanks, SeanBoy

Entire code below (apologies for colours)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
 
 
html, body {margin: 0; padding: 0; border: 0;background:#a7a09a; }
 
#wrapper {
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 1000px;
}
 
#header-left {
	text-align: center;
	float: left;
	width: 830px;
	margin: 0 0 0 0;
	background: yellow;
}
 
#header-right {
	text-align: center;
	float: left;
	width: 170px;
	margin: 0 0 0 0;
	background: blue;
}
 
#header-right-big{
	text-align: center;
	float: left;
	width: 170px;
	height:600px;
	margin: 0 0 0 0;
	background: blue;
}
#menu-left {
	text-align: center;
	float: left;
	padding: 0px;
	border:0px;
	width: 120px;
	height:600px;
	background:#F0F;
}
 
#main-content {	
	text-align: center;
	float: left;
	padding: 0px;
	border:0px;
	width: 590px;
	height:600px;
	background:#0F0;
}
 
#menu-right {
	text-align: center;
	float: left;
	padding: 0px;
	border:0px; 
	width: 120px;
	height:600px; 
	background:#F03;
	overflow:inherit;
}
 
</style>
</head>
 
<body>
 
  <div id="wrapper">
	  <div id="header-left">
		   HEADER LEFT
      </div>
	  <div id="header-right">
		   HEADER RIGHT
      </div>
    </div>
 
    <div id="wrapper">
      <div id="wrapper">
        <div id="menu-left">
	 	   menu left
        </div>
        <div id="main-content">
	    	main content
        </div>
        <div id="menu-right">
		   menu right
        </div>
      </div>
      <div id="header-right-big">
		   HEADER RIGHT
      </div>
    </div>
 
    <div id="wrapper">
	  <div id="header-left">
		   Footer
      </div>
	  <div id="header-right">
		   HEADER RIGHT
      </div>
    </div>
 
</body>
</html>
 
<code>