Floating a video to the right side of my webpage-CodePudding

I am working on a webpage for class and we are learning about how to put videos on our websites. We aren't using JS just CSS and HTML. I know how to get a photo to float to the right but for some reason I can't get a video too. I got it placed on the right side of the page but it just screwed up the layout and moved my footer higher up on the page then it should be. The CSS is for 2 webpages so if it looks like it has things that don't belong that is why. Also this is not a video from youtube. Most examples I've seen come up are explaining that but not exactly the issue I'm having

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Pacific Trails Resort</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assignment8.css" type="text/css">  
</head> 
<body>
<div id="containerptr">
<header> 
 <h1>John's Favorite Vacay Destinations</h1>
</header>
<main>
  <nav>
    <ul>
      <li><a href="assign8_home.html">Home</a></li>
      <li><a href="assign8_ptr.html">Pacific Trails</a></li>
    </ul>
  </nav>
  <h2>Pacific Trails Resort</h2>
  <p>
  Pacific Trails Resort offers a special lodging experience on the California North Coast. 
Relax in serenity with panoramic views of the Pacific Ocean.
  </p>
  <ul>
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours of the redwood</li>
  </ul>
  <video controls="controls"
         poster="pacifictrailsresort.jpg"
         width="320" height="240">
    <source src="pacifictrailsresort.m4v" type="video/mp4">
    <source src="pacifictrailsresort.ogv" type="video/ogg">
    <a href="pacifictrailsresort.jpg">Pacific Trails Resort</a>(.m4v)
  </video>
</main>
</div>
<footer><p>Copyright &copy; 2021 <a href="mailto:[email protected]">Eric Jones</a></p> 
</footer>
</body> 
</html>

CSS:

body {
    font-family: cursive;
    margin: 0px 0px 0px 0px;
    background-image: linear-gradient(#7dafff, #f7f7f7);
}

#container {
    width: 960px;
    padding: 50px 50px 50px 50px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 0px #1e1e1e;
    border-radius: 15px 15px 15px 15px;
    background-image: url(lightbluebkg.jpg);
}
#containerptr {
    width: 960px;
    padding: 50px 50px 50px 50px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 5px #1e1e1e;
    border-radius: 15px 15px 15px 15px;
    background-image: linear-gradient(#4fb377, #f7f7f7);
}

h1 {
    font-family: cursive;
    text-align: center; 
}
h2 {
    font-family: fantasy;
    text-shadow: 2px 0px white;
}

nav a:link {
    color: #05116b;
}
nav a:visited {
    color: #0041a8;
}
nav ul {
    list-style-type: none;
    text-align: center;
}
nav li {
    display: inline;
    padding-left: 15px;
}

img {
    margin: 0 15px
}

.photo {
    float: right;
    transform: rotate(4deg);
}

video {
    float: right;
}

footer {
    font-size: .7em;
    text-align: center;
    border-top: 1px solid #003366;
    background-color: #BACBE0;
    padding-bottom: 5px;
    padding-top: 5px;
}

CodePudding user response：

I know what your problem is, when you float your video to the right, it messes up the footer under it... add this to your html above the footer and below the main...

</main>
    <div class= "clr"> </div>
</div>
<footer><p>Copyright &copy; 2021 <a href="mailto:[email protected]">Eric Jones</a></p> 
</footer>

and now add this selector to your css file....

.clr{
    clear: both;

this will probably solve your problem..

How does this solve the problem --> when you float your elements, you actually order the elements below them to overlap the elements which are floating

so, when you add this clr div with the clear both selector, you are telling the elements below to not overlap the which are above

CodePudding user response：

focus on these things;

firstly add display:inline-block; to the tag containing all the
tags (i.e. present after
) so that they consumes that much space only in which it is present.

2.and then add a height to you #containerptr so the the the video does not override your footer