I designed an HTML5 site, but when it renders in older versions of Internet Explorer the layout changes. I am not sure what is wrong with it. I’ll post the link and you can view the source code. I’ll also post my css. Disability
@charset "utf-8";
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
background-color: #FFF;
}
html {
background-color: #D0D0D0;
}
.clearfix:before, .clearfix:after {
content: "\\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
body {
width: 1000px;
padding: 0;
text-align:left;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
background-color: #FFF;
margin-top: 0;
margin-bottom: 0;
height: auto;
}
.table_header {
color: #000;
background-color: #465880;
text-align: center;
}
.table_odd_row {
background-color: #D8D8D8;
text-align: center;
}
.table_even_row {
text-align: center;
}
.table_first_column {
text-align: left;
}
section {
float: right;
width: 835px;
padding-right: 10px;
}
#SideBarAds {
float: left;
width: 125px;
height: 100%;
padding-top: 75px;
padding-right: 10px;
padding-left: 10px;
}
#MainColumnAd {
float: right;
width: 835px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
}
footer {
width: 1000px;
padding-top: 2em;
float: right;
text-align: center;
margin-bottom: 10px;
}
h1 {
font-size: 1.5em;
color: #465880;
}
h2 {
font-size: 1.2em;
color: #465880;
}
h3 {
font-size: 1em;
font-style: italic;
color: #465880;
}
.body_image {
padding: 10px;
float: right;
}
#DurationOfWorkTitle {
font-weight: bold;
background-color: #09F;
text-align: center;
}