Hi everyone, I'm encountering an issue. I'm attempting to create a website with three columns that resembles a flyer.
It displays correctly in Firefox, but in Internet Explorer (version 7 on my computer), the width of the middle column is not being recognized.
Below is the code:
</html>
<head>
<link rel="stylesheet" type="text/css" href="standards.css">
</head>
<body>
</div>
<div id="main">
<div id="row">
<div id ="column" style="float:left;">
</div>
<div id ="column" style="float:right;">
</div>
<div id ="column" style="margin: 0% 0% 0% 35%;">
</div>
<div id="row">
<div id ="column" style="float:left;">
</div>
<div id ="column" style="float:right;">
</div>
<div id ="column" style="margin: 0% 0% 0% 35%;">
</div>
</div>
</div>
</body>
</html>
and here is the css:
div#column {
border-style:solid;
border-width:5px;
float: top;
text-align: justify;
padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */
height:97%;
width:25%;
background-color: #ffefd5;
}
div#row {
border-style:solid;
border-width:5px;
margin: 5% 5% 5% 5%;
text-align: justify;
padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */
height:200em;
background-color: #ffefd5;
}
div#main {
float: top;
text-align: justify;
padding: 2em;
min-width: 16em; /* Minimum width (of heading) prevents display errors in modern browsers */
}