CSS: How to make a div block *not* take space in its parent container

Question

If I have 2 div tags:

<div id="parentDiv">
   <div id="childDiv"><!-- other html --></div>
   <!-- parent div html -->
</div>

I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.

Reason (in case this looks like bad code design to anyone): I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.

I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.

Solution 1

You can give it a position absolute, and navigate it with margins.

    #childDiv {
      position: absolute;
      margin-top: -100px;
      margin-left: -100px;
    }

Solution 2

How about a simple

#childDiv {height:0; overflow:visible;}

But you probably want it to have a background colour, hm? Hm.

Solution 3

#parentDiv {
    position: relative;
}
#childDiv {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

If you need to bump the content around, or overlap stuff that is 'outside' of the sidebar, you can use negative margins to increase the width of the childDiv or move it up (to cover padding or margins you can't override).

If you need to make the #childDiv cover the entire #parentDiv, you can use a bit of JavaScript to set a min-height on childDiv, then add a colored background or something to cover any content.

var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');

Solution 4

You have to take the childblock out of the flow. The best way to do this is position: absolute on the child div and position: relative on the parent div.

View more solutions