can parent and child div overlap?

Discussion in 'CSS' started by winterheat, Aug 12, 2008.

  1. #1
    i was doing some tab design and testing with IE7 and Firefox 2, and it was doing something like

    Please see:
    http://www.0011.com/header-test.html

    <div style="width:600px;height:30px;border-bottom:1px solid orange">
        <div style="width:200px;height:30px;border-bottom:1px solid blue">
        </div>
    </div>
      
    <div style="width:600px;height:30px;border-bottom:1px solid red">
        <div style="width:200px;height:32px;border-bottom:1px solid green">
        </div>
    </div>
    
    
    <div style="margin-top:20px;width:600px;height:30px;border:1px solid yellow">
        <div style="width:200px;height:60px;border:1px solid brown">
        </div>
    </div>
    HTML:
    it turns out in IE7 and Firefox 2, the child div will cover up the outer div's border, while in IE6, it seems like the child div's border cannot cover up parent div's border. what's more, the child div's border can actually go outside of parent div's border.

    what's more... the third test case, the flow of the document only go for a height of 30px, even though the drawing of the child div has a height of 60px. and making the third test case overlap with the HTML validation image.

    Actually, isn't it more logical that the outer div's border cannot be covered up by the child's div's border? so IE6 makes more sense?

    Nevertheless, to achieve tab's appearance, I need the selected tab to have a white bottom border to cover up the container div, so IE7 and Firefox 2's method will work... but since IE 6 won't work with it, so I will need to float some separation div with a bottom border instead...

    but the real question is, is there in the box model spec that says the child div's border can cover up the parent's div's border? without height specified in the parent div, i think it will auto expand to contain the child div and therefore the child div's border can never cover up parent's div's border. With height specified, then the child div's border can cover up the parent div's border?
     
    winterheat, Aug 12, 2008 IP