razor div skips out with css ::after

Question

This is my MVC partial view ,

  <p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
  </p> 

When it renders the items in the view renders outside the p tag like below,

Why is the highlighted div skipping outside the div , any idea ?

Answer 1

The problem actually originated from <p> tag is a block-level element which enables "tag omission", which automatically omit the closing tag and closes itself if these elements mentioned below are found before matching end tag </p>:

• <address>
• <article>
• <aside>
• <blockquote>
• <div>
• <dl>
• <fieldset>
• <footer>
• <form>
• <h1> to <h6>
• <header>
• <hr>
• <menu>
• <nav>
• <ol>
• <pre>
• <section>
• <table>
• <ul>
• another <p> element

Therefore, it implies that those block elements above cannot be nested inside <p> element.

Rather than using paragraph tag to nest other elements mentioned above, you can just use <div> tag for nested <div>s:

<div class="contain mutliOptions method" id="paymentOptions">                                       
    @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
</div> 

Reference:

The HTML paragraph element (MDN)