Have a div extend when an element from other div overlaps?

I have a div (lets call it header), and another div (lets call is content). Now, 开发者_开发知识库the content div extends its height to its contents. Within header, i have an element that overlaps far into content, but content div doesnt extend with the elements overlapping from header. Heres the css i have so far:

.content {
height:auto;
}

Any suggestions?

http://jsfiddle.net/pgvZr/

header and content are siblings, so there is no way to have content expand with content that is part of header using just css

To solve your problem, you can:

• use javascript to calculate the height content should have and set it dynamically
• put header inside content and remove the fixed height of content

I'm not sure i understand the issue. You want to extend content height by adding text to header_inner?

The reason your "content" div isn't being pushed down is because you have a height set on your "header" div. So, relative to your "header" div, your "content" div is starting 100px down. If you don't set the height, then the "header" div ends up being the height of whatever is contained within it.

Take a look at this fiddle... simply removed your height: 100px; off the header and it accomplishes what you want. http://jsfiddle.net/pgvZr/4/

Edit: If you're adding content to the header and want it to be part of your content div (i.e have your content div grow with the header_inner text), then you should probably just move it into the content div. Otherwise, then you shouldn't specify the height on the header, and let it automatically push your content div down when you add the header_inner like my fiddle does.

That's because the child div has a higher z index than anything else, meaning its stacked way on top of everything and it doesn't participate in the document "flow" due to its positioning. I suggest use JQuery to calculate and set its height based on the heights of the other two divs.