Menu
Please run my code in IE and firefox. When i run it in firefox, it is perfect, but when i run it in IE the right hand section seems to expand a little. Can you please tell me how i could stop this. [COLOR=DarkGreen]SHOULD i use a table instad of DIVs.
[SIZE=3]HERE IS THE HTML
[COLOR=Blue]<html xmlns=”
<head>
<title>Two Column Fixed Width Layout</title>
<link rel=”stylesheet” href=”mystyle.css”>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
</head>
<body>
<div id=”container”>
<div id=”header”> <!–HEADER–>
<p>banner<p>
</div>
<div id=”left”> <!–LEFT–>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
</div>
<div id=”right”> <!–RIGHT–>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
</div>
<div id=”footer”> <!–FOOTER–>
<p>Footer</p>
</div>
</div> <!– CONTAINERS CLOSING TAGS –>
</body>
</html>
[SIZE=3]HERE IS THE EXTERNAL STYLE SHEET
[COLOR=Red]body {
text-align: center; /* this aligns the body content to the center of the page
}
#container { /* the body consists of a container – everything is inside the container
text-align: left; /* this aligns the content of the container to the left
margin: 0 auto; /* 0 for top and bottom, auto for left and right – this centers the page content
width: 780px; /* width is set to 780px
}
#header {
border: 1px solid black; /* this creates a solid border around the div
margin: 20px; /* this creates 20px space around the header
padding: 20px; /* this creates 20px space between the content and the border
}
#left {
border: 1px solid black; /* this creates a solid border around the div
width: 318px; /* width is set to 310
margin-left: 20px; /* this creates a 20 px space around the left of the div
float: left; /* this floats the div to the left
display: inline; /* div will be displayed inline
padding: 20px; /* this creates 20px space between the content and the border
}
#right {
border: 1px solid black; /* this creates a solid border around the div
margin-left: 382px; /* this creates a 392px space around the left of the div
margin-right: 20px; /* this creates a 20px space around the right of the div
padding: 20px; /* this creates 20px space between the content and the border
}
#footer {
border: 1px solid black; /* this creates a solid border around the div
margin: 20px 20px 0px 20px; /* top, right, bottom, left – spaces around the div
padding: 20px; /* this creates 20px space between the content and the border
clear: left; /* this keeps the footer to the bottom incase the left becomes longer than the right area
}