CODEWITHSUNDEEP
csshtmlyoutubecss-floattextwrangler
user3247712
user3247712

Reputation: 47

How to float/position Youtube video to the right of <p> text?

We have not learned javascript as this is a beginner class but I need to somehow float or position my youtube video to the right. I have the float id in my CSS file as float: right;

<div id="content">
        <h1>Welcome!</h1>
        <p>"Do You Even Lift?" is an organization that will help you and many others get motivated to get in shape. If you want to get stronger,
         lose weight, gain weight or simply live a healthier life, you've come to the right place.<p>
         <p>For those that already lift, have lifted previously in their lifetime, are not sure if they lift or not, this video will be helpful in answering that question.</p>
        </div>
        <div id="float">
        <iframe src="http://www.youtube.com/embed/OloLS5kTrVs" width="400" height="315" frameborder="0" allowfullscreen>
        </iframe>
        </div>










<hr>
<div id="footer">Copyright &copy; 2014 Corey Osmon
    </div>


    </body>
</html>

Upvotes: 3

Views: 11449

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

Demo

HTML

<iframe src="http://www.youtube.com/embed/OloLS5kTrVs" width="400" height="315" frameborder="0" allowfullscreen></iframe>

 <h1>Welcome!</h1>

<p>"Do You Even Lift?" is an organization that will help you and many others get motivated to get in shape. If you want to get stronger, lose weight, gain weight or simply live a healthier life, you've come to the right place.</p>
<p>For those that already lift, have lifted previously in their lifetime, are not sure if they lift or not, this video will be helpful in answering that question.</p>
<div class="clear"></div>
<hr>
<div id="footer">Copyright &copy; 2014 Corey Osmon</div>

css

iframe {    
    width:50%;    
    float:right;    
}

.clear {    
    clear:both;    
}

Upvotes: 2

Related Questions