Ok I have two DIV tags, one nested in the other. When I give the outer DIV tag a border it's fine. But when I remove the border this is where the problem comes in. Lets say I have the outer DIV tag with a margin-top: 100px and the inner DIV tag with margin-top: 50px. That should have the outer DIV tag be 100px below it's parent element and the inner DIV tag 50px below the top of the outer DIV tag.
But the problem is that when the border is set to 0 for the outer DIV tag, both DIV tags "share" their margin-top CSS attribute. The highest number is applied to both DIV tags and the inner DIV tag "glued" to the top of the outer DIV tag. But when I give the outer DIV tag a border, it works fine. But I don't want a border.
Here's the code:
CSS:
div.outside {
margin-top: 70px;
height: 400px;
width: 500px;
margin-right: auto;
margin-left: auto;
background-color: red;
border: 0px solid red;
}
div.inside {
margin-top: 20px;
height: 300px;
width: 250px;
margin-right: auto;
margin-left: auto;
background-color: green;
border: 0px solid black;
HTML:
<div class="outside">
<div class="inside"></div>
</div>
So in this case with the code above both DIV tags are 70px from the top and are "glued" together at their top edges. How can I have the DIV tags "margin-top" behave indepently and have a 0px border?
Hope that makes sense.
