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

Question

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 expanding 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?

Answer 1

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.

Answer 2

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?).