Hi,
I have a two column page layout with CSS. IT works fine in IE but not in others 9safari, opera and firefox). The menu is on right and is fixed with. The content is to the left and must be flexible. If i give it a fixed width, it works on all browsers. Other wise, except in IE, the content goes far below the right menu and fills the entire page. It doesn't fit to the left side of the right menu. Mind you that this happens if the content is big. Here is the html and the css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#0084C7;
font-size:16px;
margin:0;
padding:0;
width:96%;
margin-right:auto;
margin-left:auto;
margin-top:15px;
}
#header{
background-color:#fff;
height:auto;
}
#right{
float:right;
width:250px;
background-color:#0084C7;
/*min-height:650px; /* for modern browsers */*/
height:auto !important; /* for modern browsers */
/*height:650px; /* for IE5.x and IE6 */*/
margin-left:6px;
padding:4px;
}
#center {
margin-right:200px;
background-color:#eec;
/*min-height:650px; /* for modern browsers */*/
height:auto !important; /* for modern browsers */
/*height:650px; /* for IE5.x and IE6 */*/
}
#footer {
clear:both;
background-color:#fff;
height:20px;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.jpg" />
</div>
<div id="right">
right content
</div>
<div id="center">
main data goes here
</div>
<div id="footer">
footer
</div>
</body>
</html>
I have a two column page layout with CSS. IT works fine in IE but not in others 9safari, opera and firefox). The menu is on right and is fixed with. The content is to the left and must be flexible. If i give it a fixed width, it works on all browsers. Other wise, except in IE, the content goes far below the right menu and fills the entire page. It doesn't fit to the left side of the right menu. Mind you that this happens if the content is big. Here is the html and the css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
background-color:#0084C7;
font-size:16px;
margin:0;
padding:0;
width:96%;
margin-right:auto;
margin-left:auto;
margin-top:15px;
}
#header{
background-color:#fff;
height:auto;
}
#right{
float:right;
width:250px;
background-color:#0084C7;
/*min-height:650px; /* for modern browsers */*/
height:auto !important; /* for modern browsers */
/*height:650px; /* for IE5.x and IE6 */*/
margin-left:6px;
padding:4px;
}
#center {
margin-right:200px;
background-color:#eec;
/*min-height:650px; /* for modern browsers */*/
height:auto !important; /* for modern browsers */
/*height:650px; /* for IE5.x and IE6 */*/
}
#footer {
clear:both;
background-color:#fff;
height:20px;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.jpg" />
</div>
<div id="right">
right content
</div>
<div id="center">
main data goes here
</div>
<div id="footer">
footer
</div>
</body>
</html>
Comment