Need help positioning in html

Question

I want to put a list in between the embedded video and the picture and am unsure how to do so. Any and all help would be greatly appreciated. If I did something incorrect asking this question please let me know.

Thanks

<!DOCTYPE HTML>
       
<html>
<head>
 <meta charset="utf-8" />
 <title> Yui </title>
 <style type="text/css">
  h1,h2,h3,h4,h5,h6 {color:green; text-align:center;}
     p {color:green;}
        a {color:green; text-align:center}
     hr {height:4px; background-color: black;width:100%;} 
 </style>
</head>
<body>
 
 <h1> Yui </h1>
 
 <hr>
 
 <h2> <a href="http://www.yui-lover.com/">Yui's Fanpage <a>
 &nbsp|
 <a href="https://en.wikipedia.org/wiki/Yui_(singer)">Yui's Wiki </a>
 &nbsp|
 <a href="https://www.facebook.com/YUI.net.International?fref=ts"> Yui's Facebook </a>
 </h2>
 
 <hr>
 
 <p>
 <a href="http://n-jinny.com/wp-content/uploads/2013/11/YUI1.jpg">
 <img style="float:right; border-color: transparent" src="http://n-jinny.com/wp-content/uploads/2013/11/YUI1.jpg" width="900" height="450" alt="Yui" > </a>
  YUI is a Japanese singer-songwriter and J-pop/J-rock artist, born March 26, 1987 in Fukuoka, Japan. She sings, plays the acoustic guitar, and writes her own songs. YUI has written a vast number of theme/tie-up songs for popular Japanese drama/film, anime and commercial productions. She is the second female in Japanese music history that has achieved a record of four consecutive No 1. Singles since J-pop star, Utada Hikaru. She is currently signed with Gr8! Records Label, a sublabel under Sony Music Entertainment (Japan).
    
 </p>
 
 <iframe width="560" height="315" 
 src="https://www.youtube.com/embed/JmWf--kr4UQ" frameborder="0" allowfullscreen>
 </iframe>
 
 <ul style="list-style-type: circle">
       <li>Goodbye Days </li>
       <li>Again </li>
       <li>Life </li>
    </ul>

 
 <hr>
 
 
</body>
</html>

Your question is not clear what you really want to do. if by saying _list_ you mean this list: `
` then you can simply move the `
` block to the top of `` which contains the youtube video. otherwise please elaborate on _I want to put a list in between the embedded video and the picture and am unsure how to do so_. — EhsanT, Sep 19 '15 at 14:36

score 0 · Answer 1 · edited May 23 '17 at 11:51

Here's the general idea of what you'd do:

HTML

<p class="clearfix">
  test
  <img src="http://placehold.it/350x150">
</p>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<iframe></iframe>

CSS

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
img {
  float: right;
}

Code Pen

Explanation:

The p is a block level element, so it'll take up the whole width and the next element will be displayed underneath it. The ul is also a block level element, so it too will take up the whole width and the next element will be displayed underneath it. The iframe is an inline element, but since it's parent is block level, it'll be displayed underneath it.

If you run my code without the clearfix, it won't work. The ul won't be underneath the image. This is because the height of the p isn't reflecting the height of the img (which is inside the p). This is a well known problem, so I'll refer you to people who could explain it better than I could. Suffice it to say, using clearfix will give you your desired result.

Tangential advice:

Fix your indentation and style. Refer here for a style guide. Refer here for help formatting in Stack Overflow.
http://sscce.org/ is great advice on how to ask questions such that people could more easily help you, and so others would find your question useful. People often use Code Pen's to demonstrate their SSCCEs.
If you want to go a bit above and beyond, sketching out what you want things to look like and adding it as an image would be really useful. I use Sketch for this, and LiceCap to take screenshots and GIFs when appropriate. EDIT: your code snippet did a good job of visually showing what you want.
I think http://learn.shayhowe.com/ is a great resource for HTML/CSS.

Need help positioning in html

1 Answers1