link for the website is: http://moneyzzsharma.comze.com/
this is not same in IE6. i.e the 3 orange tables. If i make them float:left then they lose their equal height. should i make a different stylesheet for IE6? Also if possible please tell the reason of the failure of the code in IE 6.
CSS code is:
.cols{
width:100%;
word-spacing:.3em !important;
z-index:105;
}
.colscenterbox{
width:100%;
display:table;
border-spacing:10px;
position:relative;
margin:60px auto 0;
z-index:105;
}
.colsouterbox{
display:table-cell;
width:30%;
border-radius:8px;
background-color:#ff5118;
padding-bottom:12px;
}
.colsinnerbox{
width:90%;
max-width:90%;
text-align:justify;
margin:auto;
}
.col1{
}
.col2{
margin-left:4%;
margin-right:4%;
}
.colsheading{
margin-top:0.5em;
font-size:1.3em;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bolder;
}
.colsimg{
margin:20px auto;
max-width:100%;
width:100%;
border:1px solid #C30;
}
.colspara{
height:auto;
margin:0 auto;
}
HTML Code is:
<div class="cols">
<div class="colscenterbox">
<div class="col1 colsouterbox">
<div class="colsinnerbox">
<h1 class="colsheading">
Business Plans
</h1>
<img src="images/col1.jpg" class="colsimg" />
<p class="colspara">
Here you will find free samples of business plans that will help you to run your own business.
</p>
</div><!--colsinnerbox ends-->
</div><!--col1 ends-->
<div class="col2 colsouterbox">
<div class="colsinnerbox">
<h1 class="colsheading">About Template</h1>
<img src="images/col1.jpg" class="colsimg" />
<p class="colspara">
Free Website Template from TemplateMonster.com! We hope that you like this template and will use it for your websites.</p>
</div><!--colsinnerbox ends-->
</div><!--col2 ends-->
<div class="col3 colsouterbox">
<div class="colsinnerbox">
<h1 class="colsheading">Useful Information</h1>
<img src="images/col1.jpg" class="colsimg" />
<p class="colspara">
Read this sample article and learn more about the strategic business planning.
</p>
</div><!--colsinnerbox ends-->
</div><!--colscenterbox ends-->
</div><!--col3 ends-->
<div class="fake_float">
</div>
</div><!--cols ends-->