CSS gurus, can I make my absolutely positioned child element force the main parent's height?

This is kind of hard to explain.

I have an absolutely positioned floating secondary content box.

It works great in all occurrences.

Except, when you submit a form and don't fill out the fields (see here, and push send). The box expands to show the errors, and underneath the footer there is a blank space. The best example I can give is to see it in action (link above).

I've played with min-height and it didn't work too good. I'd also like to avoid expandin开发者_JS百科g the footer with code in the event of form errors if I can help it.

Should I ditch the absolute positioning? And try with margins? Is there any other way to get it to work?

No. That's the point of absolutes is that they don't affect the parent.

I would suggest not using absolute positioned elements for anything with dynamic content.

In your case i'd try floating the two primary containers to the left, and use a negative top-margin to pull the secondary-content div back up.

There's always js if you dont want to re-code your css but it would be better in the long run to change your css.

I accepted Ben's answer, but I decided to outline the steps I had to take...

First, I changed the inner box to float: right, with a margin: -50px 40px 40px 0;. This brought the inner box to the correct place up top, but the parent collapsed.

I added an element beneath the #content with clear: left to make the parent expand to the height of the content on the left.

I then had to absolutely position the elements in the footer, because they were being forced down by the height of the inset box (anyone know a better way to do this?).