Need help with an off-set div

stuffed_tiger · 10-01-2012, 05:15 PM

This is what I have...

Code:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HOME</title>
</head>

<body>

<div style="width:700px;height:500px;background-color:gray;margin-left:auto;margin-right:auto;">
	
	<div style="width:500px;height:50px;background-color:red;margin-left:auto;margin-right:auto;">
	<h1 style="text-align:center;">HEADER</h1>
	</div>
	
	<div style="width:200px;height:400px;background-color:lightgreen;float:left;">
		<ul>
			<li>HOME</li>
			<li><a href="page2.htm">PAGE 2</a></li>
			<li><a href="./folder2/">PAGE 3 IN FOLDER 2</a></li>
		</ul>
	</div>
	
	<div style="width:700px;height:400px;background-color:lightblue;">
	
		<div style="width:20%;height:20%;margin-left:auto;margin-right:auto;">
		This is some stuff.
		</div>
		
	</div>
	
	<!-- BROKEN -->
	<div style="width:500px;height:50px;background-color:yellow;margin-left:auto;margin-right:auto;">
	<h2 style="text-align:center;">FOOTER (broken)</h2>
	</div>

</div>

</body>

</html>

... but for some reason the footer displays 20px below where it "should." I don't understand why. Could someone explain this to me?

COBOLdinosaur · 10-01-2012, 05:47 PM

Based on the code it displays exactly As I would expect it. I don't see the float being cleared anywhere, so you can try adding clear:both to the final div.

You are also dealing with an extra linefeed. One for the h2 and one for the div. Wrapping a div around the h2 does not make much sense to me.

stuffed_tiger · 10-01-2012, 06:31 PM

Okay, I've modified it so that it appears how I want it. Thank you for your help. I also removed the excess divs.

Here is what I have...

Code:

<body>

<div style="width:700px;height:500px;background-color:red;margin-left:auto;margin-right:auto;">

	<h1 style="text-align:center;width:500px;height:50px;background-color:orange;margin-left:auto;margin-right:auto;margin-bottom:0px;">HEADER</h1>

	<div style="width:200px;height:400px;background-color:lightgreen;float:left;">
		<ul>
			<li>HOME</li>
			<li><a href="page2.htm">PAGE 2</a></li>
			<li><a href="./folder2/">PAGE 3 IN FOLDER 2</a></li>
		</ul>
	</div>

	<div style="width:700px;height:400px;background-color:lightblue;text-align:center;">
	This is some stuff.
	</div>

	<h2 style="clear:both;text-align:center;width:500px;height:50px;background-color:yellow;margin-left:auto;margin-right:auto;margin-top:0px;">FOOTER</h2>

</div>

</body>

What seemed to fix it was the addition of 'margin-top:0px;' to the h2.