0

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.

InVaDeR
  • 3
  • 1
  • 5
  • Refer this http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside – K K Nov 02 '14 at 13:23

3 Answers3

1

<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.

Yogu
  • 9,165
  • 5
  • 37
  • 58
1

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.

khichar.anil
  • 4,585
  • 1
  • 23
  • 21
0

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.

Vinod Patil
  • 1
  • 1
  • You should really explain to the asker why you need to use a div instead. See this answer to the duplicate for more details: http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside – ShaneQful Nov 02 '14 at 13:32