CodingForums.com - Need help with an off-set div

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Need help with an off-set div (http://www.codingforums.com/showthread.php?t=274861)

Need help with an off-set div

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?

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.

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.