Dear all,
I am a novice in css programming and was happy to get a layout
involving floats going in Firefox 1.5. Yet when I displayed the page in
IE6 the layout went all pear-shaped! Below is the minimal code. Any
advice on how the page may be displayed correctly in both browsers is
greatly appreciated. Many thanks!
Regards,
Michael
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
div#header
{
clear: both;
margin: 2% 5% 0%;
border: 1px black solid;
}
/* right border of left float, including margin, after 27% of page
width */
div#left
{
float: left;
width: 20%;
margin: 2% 0% 0% 5%;
border: 1px solid black;
}
/* left border of right float, including margin, after 27% of page
width, coming from the right */
div#right
{
float: right;
width: 20%;
margin: 2% 5% 0% 0%;
border: 1px solid black;
}
/* width of middle float must hence be 100% - 2* 27% = 46% of page
width */
div#middle
{
width: 46%;
margin: 2% 0% 0% 27%;
border: 1px solid black;
}
h1
{
margin: 0em 0em 0em 0em;
font-family: sans-serif;
padding: 0.6em;
}
h3
{
margin: 1em 0em 0.5em 1em;
font-family: sans-serif;
padding: 0em;
}
</style>
</head>
<body>
<div id="header">
<h1>
title
</h1>
</div>
<div id="left">
<h3>
left menu
</h3>
</div>
<div id="right">
<h3>
right menu
</h3>
</div>
<div id="middle">
<h3>
main body
</h3>
</div>
</body>
