Hey.
I spent the whole day redesigning the layout on my website, and I made it so that my main content and my sidebar stretches down 100%. I got the site the way I wanted so to finish it up before putting it on my actual website, I put the following code in the top of my page so it could be validated as XHTML 1.0 strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Now it messed it up. The "height:100%" doesn't work anymore. Could someone look at it for me and give me some help?
Btw, I changed the body background to white so that I could see it easier. Check .content and .sidemenu.
html {
height: 100%;
}
body {
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background: #fff;
margin: 0;
padding: 0;
color: #CCC;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
font-family: Verdana;
color: #8AD3FF;
}
p {
font-family: sans-serif;
font-size: .95em;
color: #FFFFFF;
text-align: left;
margin-left: 7px;
}
.content {
height: 100%;
background-color: #222222;
width: 80%;
float: left;
z-index: 999;
margin-top: 0;
}
.sidemenu {
background-color: #111111;
width: 20%;
height: 100%;
float: right;
}
.sidemenux {
height: 25px;
background-color: #073444;
width: 100%;
margin-top: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
.headerleft {
background:url(../Images/header-left.jpg) no-repeat left top;
height: 174px;
}
.header {
background:url(../Images/header-middle.gif) repeat-x left top;
height: 174px;
max-width:1920px;
min-width: 960px;
background-color: #FFFFFF;
}
.headerright {
background:url(../Images/header-right.png) no-repeat right top;
height: 174px;
}
.menu {
position: relative;
width: 1160px;
margin-left: -30px;
}
#flash {
margin-top: -10px;
width: 720px;
height: 290px;
}
#search {
position: absolute;
margin-left: 5px;
margin-top: 5px;
}