CODEWITHSUNDEEP
htmlcssstylesheetstyling
Sean H Jenkins
Sean H Jenkins

Reputation: 1780

Center div not working in IE8?

Never had problems with centering divs before but I have been trying to get 100% height columns (which I have achieved for most browsers). I believe that the 100% height is messing with the centering of the div in IE8.

So basically I'm trying to get #wholewrap to center align and I'm currently using margin: 0 auto; but it doesn't work for IE8?

Any ideas why this bug occurs or how to fix it?

If you try this code it should work in FF, Chrome and Opera, havn't got IE9.

For some reason the results for this in JSFiddle vary for IE8 for some reason, what it shows in JSFiddle is not actually what it shows in IE8.

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="newcss.css"/>
</head>
<body>

<div id='wholewrap'>

    <div class='ttc'>
       <p>
          Left Column<br />
          Left Column<br />
          Left Column<br />
       </p>
    </div>

    <div class='otc'>
       <p>
          Right Column<br />
          Right Column<br />          
       </p>
    </div>

    <br style='clear:both;' />
</div>

</body>
</html>

CSS

div{border:1px #000 solid;}

html{height: 100%;}

body{height: 100%;}

#wholewrap{width:500px;margin:0 auto;min-height: 100%;height: 100%;}

.ttc{width:45%;float:left;min-height: 100%;height: 100%;}
.otc{width:45%;float:right;min-height: 100%;height: 100%;}

Upvotes: 0

Views: 889

Answers (1)

stecb
stecb

Reputation: 14766

It could be related to the doctype .. try to put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> or HTML5 one <!DOCTYPE HTML> above your <html>

Upvotes: 7

Related Questions