parent div's border blocking child div

Question

I have a parent div and a child div. The parent div has a border-width property, but unfortunately that border-width is blocking part of the child div from being shown. The border-width property of the parent div cannot be changed. How can I get the child div to show up above the parent div's border?

Should note that the parent div has position: absolute applied, the child div does not have position applied in the CSS, and only the left and right edges of the child div are not shown, since only the border-left and border-right of the parent div are set.

Answer 1

Hi,

Try using the margin-top attribute with a negative value.

for example

childDivId

{ margin-top: -50px; }

This will raise you child div higher on the screen.

Be happy

Answer 2

See example: http://jsfiddle.net/LGR8w/

Once the elements are positioned, you are able to make the child div overlap the parent's border instead of simply expanding the parent to fit the content. (though why you want to do that is beyond me).

EDIT:

If I'm wrong, could you please explain to me why you want to make the child and parent content overlap rather than simply making the parent expand to properly fit the child? Unless this is for a stylistic overlapping design, I don't see why this is necessary.