Fluid position:relative with child position:absolute

HTML & CSS
1

Hi Guys,

Can anyone please offer me some advice on this.

  1. I have a <div> - position:relative.
  2. Inside I have a child <form> which is - position:absolute

Because the <form> is “position:absolute”, I have to give the height of the parent “position:relative”. Which works fine if the height were to be static:

The problem is I want to account for form errors and I want to have it processed via Ajax. I plan to have each error highlighted below the respective form field and as such the <form> will then appear “break out” of the containing static height div.

I’ve tried “float:left” on the <form> too and then then placed some test text below it and placed a “clear:left”. That almost worked until I checked IE:

Can anyone please offer any suggestions?

Thanks in advance…

2

That’s your problem, really. There’s no reason to position the form absolutely, as far as I can see. If you remove position:absolute from the form, it will happily sit inside the div and do its thing, all within the natural flow of the document. Adding extra elements to the form will just mean the containing div expands naturally.

As a general rule, use position:absolute as rarely as you can. It’s horrid for general layout purposes.

3

Something as simple as that, I can’t believe I messed that up.

Thanks very much Ralph, I appreciate it.