0

In my sidebar widget, I'm attempting to wrap the widget contents in a paragraph tag:

$args = array(
'id'            => 'applause-2',
'name'          => 'Applause 2',
'description'   => 'Main sidebar, below 1st horizontal rule',
'before_widget' => '<p>',
'after_widget'  => '</p>'
);

But when I check my output, it looks like the paragraph tag is getting automatically closed due to the space:

 <p>            <div class="textwidget">"Lorem ipsum dolor sit amet, consectetur    
adipiscing elit. Donec malesuada mauris dui, at auctor mauris tempor ac.
In hac habitasse platea dictumst. Vestibulum sed dolor velit." <a href="#" class="read-more">(read more)</a></div>

<img src="/wp-content/themes/italysource/img/hr.png" class="hr"></p>        </div>

INSTEAD the browser is rendering this:

<p></p>
<div class="textwidget">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris dui, at auctor mauris tempor ac. In hac habitasse platea dictumst. Vestibulum sed dolor velit." <a href="#" class="read-more">(read more)</a></div>
<img src="/wp-content/themes/italysource/img/hr.png" class="hr">  <p></p>
</div>

Is there a workaround, or something I can do to prevent this from happening?

rnevius
  • 26,578
  • 10
  • 58
  • 86
Michael Roach
  • 156
  • 2
  • 16

1 Answers1

2

<p><div></div></p> is not valid HTML. You can't put a <div> inside a <p> and get consistent results from various browsers.

This is explained better in this answer. Putting <div> inside <p> is adding an extra <p>

Community
  • 1
  • 1
Hareesh Sivasubramanian
  • 1,265
  • 7
  • 17
  • 27