DIV Height and XHTML 1.0

Question

louie540 0 Newbie Poster

14 Years Ago

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

html-css user-interface web-design

1 Contributor
2 Replies
197 Views
15 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by louie540

Dani AI

Generated 6 Months Ago

The DOCTYPE change pushed the page into standards mode, so percentage heights started to behave “by the book”: a percent height only works when the element’s containing block has an explicit height. Floats also collapse their parent unless the parent establishes a new formatting context. That explains why the same CSS that worked in quirks stopped working after the XHTML DOCTYPE, and why switching the column to absolute positioning instantly appeared to “fix” it — absolute elements use a different containing-block rule and aren’t limited by the float/container collapse.

Practical options (pick one based on browser support needs):

Modern, robust: make the container a flex container so both columns stretch equally.

.container { display: flex; min-height: 100vh; }
.content  { flex: 1; }
.sidemenu  { width: 260px; }

Older-but-stable: use CSS table layout so columns act like table-cells and match height.

.container { display: table; width: 100%; }
.content, .sidemenu { display: table-cell; vertical-align: top; }

Quick viewport-based fix: use viewport units if the goal is full-screen height.

.container { min-height: 100vh; }

If sticking with floats, ensure the parent contains them (clearfix) or give the parent an explicit height:

.container::after { content: ""; display: table; clear: both; }

Notes and cautions: ’s absolute-position fix is valid in constrained layouts (fixed header/footer heights), but it removes the element from normal flow and can cause overlap or layout issues on resize. Flexbox is the recommended modern approach for equal-height columns and responsive behavior; table-cell is a good fallback for older browsers.

Reply to this topic

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.

louie540 0 Newbie Poster · Answer 1 · 2011-10-13T05:50:25+00:00

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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"/>

</head>

<body>

<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>
							<ul>
								<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>
							</ul>
				</li>
				<li><a href="#">Videos</a>
							<ul>

								<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>
							</ul>
				</li>
				<li><a href="#">Hints</a>

							<ul>
								<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>
							</ul>
				</li>

				<li><a href="../downloads/">Downloads</a></li>
				<li><a href="../downloads/">Affiliates</a></li>
			</ul>
		</div>
	</div>
		
					<div class="sidemenu">
    
				<form id="search" action="" 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" />
				</form>
				
				<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
				
			</div>
			
			<div class="sidemenux">

			
			</div>
  
  	<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>

		</div>
</div>
</body>
</html>

louie540 0 Newbie Poster · Answer 2 · 2011-10-13T15:38:15+00:00

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