Question

I have a problem with a <div> not sizing up the content (which is two <p> elements). The content is floated.

• I have one <p> tag floated to the left
• I have one <p> tag floated to
  the right
• I have one empty <div> tag below with style=”clear:both”

Still, the <div> that contains the whole thing is 3 lines tall – not just 1 as it is supposed to be. What am I missing to make it work?

Answer 1

I prepared a fiddle and it works well – it must be an error in your code. Show us some pieces of it.

Example

Be sure to have no paddings/margins/height/lineheight affect your divs and ps (=reset browserdefaults!). Also the parent div needs to be wide enough to hold both p. Also, if you have non-floated content, the order matters.