0

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

I use a parent <p> wich 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 recieves 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> wich contains the 3 <div>s because the 3 <div>s are no longer in a <p> instead they are now sourronded 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?

Noel Widmer
  • 4,444
  • 9
  • 45
  • 69

2 Answers2

1

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

Guy
  • 1,434
  • 1
  • 19
  • 33
  • thank you so much! ... God dammit! What if I want a paragraph with block elements because todays agents often fail to do what they should regarding CSS3. This is supposed to be two column text and just because some browsers fail to split text into columns I have to choose a different approach... Huh, that is why I love webdesign :) – Noel Widmer Feb 13 '15 at 12:44
  • In your case, the best approach for colums is perhaps to use a table : `
    ` [link](http://www.w3.org/TR/html401/struct/tables.html)     – Guy Feb 13 '15 at 13:06
  • Tables are used for displaying "ordered" data but not for layout. Search engines and browser interpret your contents wrong if you use tables for layout. However, I changed p to div and added the class "AsIfP" and included it in my css whenever I used p. – Noel Widmer Feb 13 '15 at 13:58
1

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.

greatTeacherOnizuka
  • 555
  • 1
  • 6
  • 24
  • Yea got that now. But the contents of my p "are" text. I just add the divs to create a two column layout. I'll try to fiddle with display on my divs now... – Noel Widmer Feb 13 '15 at 12:54
  • Hmm, seems like it is not looking for the display property. More likely it is just not allowing elements of type div – Noel Widmer Feb 13 '15 at 12:56