CODEWITHSUNDEEP
htmlcsslayoutfloating
Noel Widmer
Noel Widmer

Reputation: 4572

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?

Upvotes: 0

Views: 59

Answers (2)

greatTeacherOnizuka
greatTeacherOnizuka

Reputation: 565

The permitted content for a <p> tag is phrasing content. Click here for more info

So, <p><div></div></p> is not valid HTML and the browser will try to close the p tag before the div begins. <p></p><div></div>.

If you provide a valid structure, the browser will behave in the way you expect.

You can have a <div> inside a <div> so if you replace your <p> with <div> you will get what you want.

Upvotes: 1

Guy
Guy

Reputation: 1444

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

Upvotes: 1

Related Questions