CODEWITHSUNDEEP
htmlcss
Sazz
Sazz

Reputation: 119

"column-span: " not being applied

So I have been trying to insert a heading inside a paragraph which has 2 columns. But upon inserting heading inside the para tag the "column-span" fails to work. But on changing the 'p' tag to 'div' the "column-span" does work.

I know you might be thinking we could just add the heading before the para to achieve the desired effect. But so can we do it in the div tag.

So my Question is why changing the div tag to p tag cannot produce the same result.

Have a look:

 p { 
 column-count: 2;
 column-width: 100px;
}

h1 {column-span: all
}


<p class="newspaper">
<h1>Lorem ipsum dolor sit amet</h1> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>

Change 'p' to div to see the effect.

Any suggestion as to why this is happening is surely appreciated. Thanks.

Upvotes: 0

Views: 106

Answers (1)

t.niese
t.niese

Reputation: 40882

A h1 element is not a valid child of p (see p – paragraph). p only accepts Phrasing content.

A p element’s end tag may be omitted if the p element is immediately followed by [...]h1[...], or if there is no more content in the parent element and the parent element is not an a element.

So if you place a h1 inside of the p then the p is closed immediately before the h1 tag.

After parsing your html the resulting DOM structure would look like this:

<p class="newspaper">
</p><h1>Lorem ipsum dolor sit amet</h1> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Upvotes: 3

Related Questions