Question

FYI: This is a follow up to another question: Position element absolutely, but to the right of another element

I have a list of form elements and I’m trying to add callouts for each one. Each form entry has this general form:

<li>
    <input ...>
    <div class='callout'>Helpful description about form item.</div>
</li>

The .callout has position:absolute and the LI‘s have position:relative so that the callout can be positioned “absolutely”, relative to the LI.

That all works fine, but the problem is that one of the ancestors of the also contains some floats so I used the overflow:hidden trick on that to make sure it contains them. Unfortunately, that also means it’s cutting off my callouts because they extend outside of it.

I guess a fallback is to drop an empty div at the end of that ancestor and just do clear:both on that, but is there a nicer CSS solution that will force the ancestor to contain the floats, but still allow absolutely positioned callouts to be visible outside the box?

Answer 1

Instead of overflow:hidden you can use clearfix method. Write like this:

li:after{
 content:'';
 display:block;
 clear:both;
}