CODEWITHSUNDEEP
htmlcssinternet-explorer
Siniyas
Siniyas

Reputation: 471

internet explorer ignores width of div

Hey guys im having a problem. Im trying to make a website with 3 columns, that looks like a flyer.

It looks fine in firefox, but in internet explorer (7 is the version on my pc), the width of the middle column width is being ignored.

Here 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 the css,

div#column {
border-style:solid;
border-width:5px;

float: top;
text-align: justify;

padding: 2em;
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
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; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
height:200em;
background-color: #ffefd5;

}

div#main {
float: top;
text-align: justify;

padding: 2em;
min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */


}

Upvotes: 1

Views: 2551

Answers (1)

Jason Gennaro
Jason Gennaro

Reputation: 34863

If div#main is your middle column, it doesn't have a width set in the styles. There is only a min-width. IE7 has trouble with min-width. See http://reference.sitepoint.com/css/min-width

EDIT:

On seeing more of the code, I think the problem is with the width and the margin on the column divs. The width is 25% x 3 plus margin of 35%, which is over 100%.

Also, you have three columns all with the same ID. IDs are for single instance use. If you plan to use the same styles on more than one element, you need to use a class. Change #column to .column in the CSS and class="column" in the HTML.

Upvotes: 2

Related Questions