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"

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;
	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;

Here is the actual HTML. I added random <p> tags so I could diagnose that it was the css height problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Metal Gear Planet</title>

<link rel="stylesheet" type="text/css" href="sheets/style.css"/>
<link rel="stylesheet" type="text/css" href="sheets/navcss.css"/>



<div class="container">
	<div class="header">
		<div class="headerleft"><div class="headerright"></div></div>

		  <div class="menu">
			<ul id="nav">
				<li><a href="../index.php">Home</a></li>
				<li><a href="../news/">News</a></li>
				<li><a href="#">Walkthroughs</a>
								<li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>

								<li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
				<li><a href="#">Videos</a>

								<li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
				<li><a href="#">Hints</a>

								<li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
								<li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
								<li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
								<li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>

				<li><a href="../downloads/">Downloads</a></li>
				<li><a href="../downloads/">Affiliates</a></li>
					<div class="sidemenu">
				<form id="search" action="http://www.metalgearplanet.com/site/results.html" id="cse-search-box">

				<input type="hidden" name="cx" value="013183922795332327494:6rp4kjmw0hk" />
				<input type="hidden" name="cof" value="FORID:9" />
				<input type="hidden" name="ie" value="UTF-8" />
				<input type="text" name="q" size="20" />
				<input type="submit" name="sa" value="Go" />
			<div class="sidemenux">

  	<div class="content">

		<h1>What the fuck</h1>
		<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj </p>
			<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj </p>
					<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj </p>


Never mind. I changed the position to absolute which fixed it. I thought that was going to mess it up even more.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.