1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Question about CSS margins

Discussion in 'Web Design & Development' started by tomdkat, Apr 8, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. tomdkat

    tomdkat Retired Trusted Advisor Thread Starter

    Joined:
    May 6, 2006
    Messages:
    7,148
    So, I've been playing with some nested DIVs and noticed something strange.

    Here is the HTML in question:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
      <title>DIV top margin</title>
    
      <style type="text/css">
    .inner {
      border: 1px solid black;
      display: block;
      margin-right: auto;
      margin-left: auto;
      width: 220px;
      height: 280px;
      margin-top: 10%;
    }
    .outer {
      display: block;
      width: 800px;
      height: 600px;
      margin-right: auto;
      margin-left: auto;
      background-color: #99ffff;
    }
    
      </style>
    </head>
    <body>
    
    <div class="outer">
    <div class="inner">inner DIV</div>
    
    </div>
    
    </body>
    </html>
    
    This produces a DIV that is 800px X 600px with a colored background. Inside that DIV, there is another DIV with the text "inner DIV" and a 1px border. Now, the inner DIV has a top margin of 10%.

    What's strange is the parent DIV has this 10% margin applied to it!!! If I add a border to the outer DIV OR if I add some text to the outer DIV, the 10% margin of the inner DIV is applied to inner DIV and not the outer DIV.

    Why is this?

    Peace...
     

    Attached Files:

  2. amanxman

    amanxman

    Joined:
    Mar 28, 2006
    Messages:
    690
    Hey,

    What is the end result you actually want? Which one, and what margins with what borders?

    Let us know and i'll write fixed css for u

    Ta
     
  3. tomdkat

    tomdkat Retired Trusted Advisor Thread Starter

    Joined:
    May 6, 2006
    Messages:
    7,148
    I've got the CSS worked out such that the 10% margin applies only to the inner DIV. The second attachment shows what I'm after. I'm asking why the 10% margin applies to the outer DIV when it's specified on the inner DIV unless the outer DIV has a border or text of its own. :)

    Peace...
     
  4. amanxman

    amanxman

    Joined:
    Mar 28, 2006
    Messages:
    690
    It's a padding bug - wack a touch of padding to the top of the outer div and you'll be sweet... for example:

    .outer {
    display: block;
    width: 800px;
    height: 600px;
    margin-right: auto;
    margin-left: auto;
    background-color: #99ffff;
    padding: 1px 0 0 0;
    }

    that extra padding on the top (be it 1px or 10px or whatever stops the 10% margin on .inner affecting .outer.)
    Hope that helps
    amx
     
  5. tomdkat

    tomdkat Retired Trusted Advisor Thread Starter

    Joined:
    May 6, 2006
    Messages:
    7,148
    I guess adding the padding is the moral equivalent of adding a border or text to the outer DIV. Is this really a bug? I saw the behavior I described above in Firefox, Opera, Safari, and Maxthon 2.0.9 (IE6 engine). Or is the "bug" in the CSS rules governing margins?

    Thanks!

    Peace...
     
  6. amanxman

    amanxman

    Joined:
    Mar 28, 2006
    Messages:
    690
    i've never come across it before, it's quite strange so i would say bug, unless im missing something obvious!!
     
  7. tomdkat

    tomdkat Retired Trusted Advisor Thread Starter

    Joined:
    May 6, 2006
    Messages:
    7,148
    Well, I found the answer to this question on another forum. The behavior I experienced is correct, per CSS 2.1 specs. It's called margin collapsing. There is an easier to digest description here. The second link was easier for me to digest, at least. :)

    Peace...
     
  8. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/701657

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice