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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question nested div issue

    Not sure what the deal is but for some reason the top 2px margin is not showing. What have I done wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    
    <style type="text/css" media="all">
    <!--
    #boxbottom {
    	background-color:			red;
    	width:						812px;
    	height:						405px;
    }
    
    #boxtop {
    	background-color: 			#CCC;
    	width:						808px;
    	height:						401px;
    	margin:						2px 0px 0px 2px;
    }
    -->
    </style>
    
    </head>
    
    <body>
    
    <div id="boxbottom">
    <div id="boxtop">why is the 2 pixel margin at the top not working?</div>
    
    </div>
    
    </body>
    </html>
    Last edited by cssnooburt; 11-18-2008 at 08:28 PM.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Other CF posters can point out the exact reason why, but I've found that in many instances the margins of a nested div seem to be overridden by content. As far as a solution, you have a couple of options.

    Padding on the outer div:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    
    <style type="text/css" media="all">
    
    #boxbottom {
    	background-color:			red;
    	width:						808px;
    	height:						401px;
    	padding:					2px;
    }
    
    #boxtop {
    	background-color: 			#CCC;
    	width:						808px;
    	height:						401px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="boxbottom">
    
    <div id="boxtop">why is the 2 pixel margin at the top not working?</div>
    
    </div>
    
    </body>
    </html>
    Absolute positioning:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    
    <style type="text/css" media="all">
    
    #boxbottom {
    	position:					relative;
    	background-color:			red;
    	width:						812px;
    	height:						405px;
    }
    
    #boxtop {
    	position:					absolute;
    	top:						2px;
    	left:						2px;
    	background-color: 			#CCC;
    	width:						808px;
    	height:						401px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="boxbottom">
    
    <div id="boxtop">why is the 2 pixel margin at the top not working?</div>
    
    </div>
    
    </body>
    </html>
    matt | design | blog

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Strange method for just getting a border?

    You could just apply a 2px border to boxtop and get rid of boxbottom. Alternatively, remove the margin from boxtop and just apply 2px padding to boxbottom.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by Lochlan View Post
    Strange method for just getting a border?

    You could just apply a 2px border to boxtop and get rid of boxbottom. Alternatively, remove the margin from boxtop and just apply 2px padding to boxbottom.
    It's explained at http://complexspiral.com/publication...psing-margins/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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