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 2 of 2
  1. #1
    c--
    c-- is offline
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    margin-top of div doubles if adjacent parent div has no border

    Hi,

    I use several (in my example 2) div boxes with absolute width (200) on the left and a box with variable width (remaining space) on the right.
    The boxes on the left are included in a container (divleft), the box on the right is included in divright.

    In my example, the right container has a red border.
    If I remove this border (i.e. change 1px to 0px), then "BOX1" has double its distance to the top of the page - which is 20 pixels (while "BOX RIGHT" is still 10 pixels from the top). If I change the margin of the class "box" from 10px to 5 px, then only "BOX RIGHT" is 5 pixels from the top, while "BOX1" is 10 pixels from the top.

    Can somebody please explain this behavior to me?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <style type="text/css">
    
    * { margin:0px; padding:0px; }
    
    #divleft { float:left; width:200px; border:0px solid red; } /* left container */
    #divright { margin-left:200px; border:1px solid red; } /* right container */
    
    .box { border-style:solid; border-color:gray; border-width:1px; margin:10px; padding:5px; } /* This margin is not always 10px */
    .boxtitle { background-color:gray; color:white; font-weight:bold; margin:0px; padding:5px; }
    
    </style>
    </head>
    <body>
    
    <div id="divleft"> <!-- left container -->
    
    <div class="box boxleft"> <!-- BOX1 -->
    <p class="boxtitle">BOX1</p>
    
    ---<br>
    
    </div>
    
    
    
    <div class="box boxleft"> <!-- BOX2 -->
    <p class="boxtitle">BOX2</p>
    
    ---<br>
    
    </div>
    
    </div>
    
    <div id="divright"> <!-- right container -->
    
    <div class="box boxright"> <!-- BOX RIGHT -->
    <p class="boxtitle">BOX RIGHT</p>
    
    
    TESTMAIN!
    <br>
    
    </div>
    
    
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    If you use firebug to inspect the body element, when there's no border, you'll notice that the entire body element is pushing 10px downwards. It's due to collapsing of margins.

    Adding a border or overflow:auto/hidden; to the container would resolve it. Or you'd need to remove margin-top from .box and apply an equivalent padding-top to its parent element. Read 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
    •