Information box in DIV with absolute positioning contained in a FIELDSET gets cut off

I'm having a few troubles with an info box that is absolutely positioned in a form. The basic construction of the page is that I am using a definition list which has the label for each field contained in a DT tag and an input box with any other related information for that field contained in a DD tag.

From what I understand where the problem lies, I have an info box (blue box on the right of the input, which is there to provide extra info for the input on it's left) which is contained part of the DD tag that is absolutely positioned. As the height of the DD tag is limited to as far as the input box stretches, the info box is being cut off. Somehow I need to extend the height of the DD tag which has an info box to accommodate it.

You can see an example of this here: http://www.andbarsolutions.com/test-html/form.htm

I have two examples, one is when the info box is on the last input, so this means it will overhang the end of the form but t开发者_如何学Pythonhat is OK. While the the second example is the info box on the first input which may stretch past both inputs depending on the amount of content it will contain. As you can see, it cuts off on both cases (particularly if you see it in FF). I will need to keep the HR tag at the end as it is there for layout purposes.

Ideally I would like to see if there a CSS-related answer to this first without resorting to scripting as I am limited the amount of scripting I can use on this page and as previously mentioned, we could be dealing with 1,2,3 or 4 lines of content in that info box so it will need to be considered as a box with a dynamic height.

Would love to hear any feedback on this!

The problem is: you use overflow:hidden on DL to clear the floats, so the absolute positioned block is hidden.

There are several ways to fix it:

• Clear the floats by any other way, for example, using clearfix:

  dl:after {
      content:"";
      display:table;
      clear:both;
  }
  

  And add hasLayout for IE in Conditional Comments:

  dl {
      zoom: 1;
  }