Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry 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?

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •