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:
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:
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?
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