<P> Tag Through Parent Element

[ChadGregory]

I am making a wordpress template and im having a problem with the <p> tag of the "the_content()" syntax which wraps the content of a post or pages in a <p> overflowing or going through the parent/wrapper element. The image below illustrates the problem.

If I put in static text without the <p> tag it doesn't go out of the parent/wrapper element. So i tried to remove the <p> tag but with many attempts i was unsuccessful.

 

So i ask of you how do fix the p tag?

 

html

<div class="product">
      <img width="300" height="186" src="-censored content" class="attachment-medium wp-post-image" alt="healthy" title="healthy">
      <p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>

 

I have no current styles applied to any of the elements in the code above.

[Love2c0de]

I just copied your code and edited it slightly and it seems to stay within the 'wrapper' div.

 

 

<div class="product" style="width: 600px; border:1px solid black;">
   <img width="300" height="186" src="-censored content" class="attachment-medium wp-post-image" alt="healthy" title="healthy">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</div>

 

For dummy text, I'd always use http://www.lipsum.com/ (Lorem Ipsum)..

 

Not sure if using   causes whitespace to take control. When I separated your 'blah blah' onto new lines and refreshed the page, the text displayed exactly how it was formatted in my text file. When I changed your text to the lorum ipsum dummy text, it worked ok.

 

Check it out.

 

Hope it helps,

 

AoTB.

[ChadGregory]

It's for a Wordpress template the &nbsp is from Wordpress

[Love2c0de]

Do you check the code I posted and was it what you meant?

 

Also, I can't stress enough the advantages of writing your own code. I used Dreamweaver for the very first time at college the other day and was ready to smash the computer up.....the most stressful and complicated approach to web designing I've ever seen. Thank god for the code view.

 

Regards,

 

AoTB.

[ChadGregory]

It didn't work for me, again when this code is present

<?php $subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id' ));
 if( $subs->have_posts() ) : while( $subs->have_posts() ) : $subs->the_post();
  ?>
  <div class="product" style="width: 600px; border:1px solid black;">
   <? echo get_the_post_thumbnail($post->ID, 'medium'); ?>
   <?php the_content(); ?>
  </div>
  <?
 endwhile; endif; wp_reset_postdata(); ?>

 

Which is the code to generate the list product divs, the text exits the wrapper, if the code is not present then it works fine

[ChadGregory]

I fixed it by adding word-wrap: break-word; to the <p> Tag

[Christian F.]

  stands for Non-Breaking Space, I'll leave it up to you to figure out why this is causing issues.