CODEWITHSUNDEEP
htmlhtml-lists
InVaDeR
InVaDeR

Reputation: 3

ul breaks out of p elemant

This really freaky thing has been happening. I have a code:

    <p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" />
     <ul class="song_list">

      <li>Prism</li>
      <li>Other Song</li>
      <li>Some other song</li>
      <li>you know...</li>
      <li>getting ridiculous</li>

    </ul>

   </p>

And when I do inspect element it appears like this:

    <p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" /></p>
     <ul class="song_list">

      <li>Prism</li>
      <li>Other Song</li>
      <li>Some other song</li>
      <li>you know...</li>
      <li>getting ridiculous</li>

    </ul>

   <p></p>

Because of this my ul is not at the right position (beside the pic). Please help.

Upvotes: 0

Views: 537

Answers (3)

khichar.anil
khichar.anil

Reputation: 4964

According to http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, P element "cannot contain block-level elements (including P itself)."

<!ELEMENT P - O (%inline;)* -- paragraph -->

It means P element can only have the inline elements inside it.

As per your html, you are using:

<p> --block element <img..../> -- inline element which is allowed **<ul>...</ul>** -- block element which is not allowed </p>

Instead of P you can use the div element.

Upvotes: 1

Vinod Patil
Vinod Patil

Reputation: 1

Remove p tag, you can use div tag. Use CSS property (float: left) to img tag and ul so they will come beside each other.

Upvotes: 0

Yogu
Yogu

Reputation: 9445

<p> expects inline content, but you specified a <ul> tag which is a block element. It is not allowed there, so the browser closes the <p> element automatically before the start of <ul>.

Think about the semantics for a second: <p> is called a paragraph. A paragraph can not contain lists. Instead of a paragraph, you should use a <diV> which expects flow content, so the <ul> tag is allowed.

Upvotes: 1

Related Questions