Although I've never had issues with centering divs before, I'm facing a challenge in achieving 100% height columns (which seems to work on most browsers). It appears that the 100% height is causing problems with centering the div in IE8.
Currently, I'm attempting to align #wholewrap in the center using margin: 0 auto;, but it's not working as expected in IE8. Any suggestions on why this bug is happening and how to resolve it?
If you test this code, it should function correctly in Firefox, Chrome, and Opera, although I haven't tested it in IE9.
Interestingly, the results vary for IE8 between JSFiddle and actual testing, with discrepancies in what is displayed.
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%;}