Search code examples
htmlcsslayoutfloating

HTML CSS Layout breaks with parent of floated elements


I am writing my own website and ran into a problem, that has never occurred to me before.

I use a parent <p> which contains 3 <div>s.

The first <div> is float: left; and the second one is float: right;.

The third <div> contains clear: both;.

The following code is PHP:

Source code in php

The layout works perfectly if I comment the opening and closing <p> </p> tags. But if the browser receives the <p>, then it somehow turns <p> into <p></p> as well as </p> into <p></p>.

The following two images were taken from the browser "inspectors" in IE and Chrome:

IE browser layout Chrome browser layout

The resulting issue is that p:first-child is not applied to my <p> which contains the 3 <div>s because the 3 <div>s are no longer in a <p> instead they are now surrounded by 2 <p>s.

This might be a feature, but I cannot figure out what it is supposed to solve or how I can take control of it.

Any ideas?


Solution

  • The P element represents a paragraph. It cannot contain block-level elements (including P itself).

    source : http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

    One solution is to replace your p by a div