CherryPlaysRoblox CherryPlaysRoblox - 9 months ago 42
CSS Question

Put an image on the right side of the page

So I have this webpage in Html and CSS, and I have this contact page. But I have this image I want to put on the right side of the page, but if I do:

float: right;
it doesn't seem to work. I also tried align but apparently the only thing close to that is
text-align
. If needed, here is my code (HTML):




CherryPlaysRoblox




</head>
<body>
<div class="outer">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
<p id="Cherry">CherryPlaysRoblox1</p>
</ul>
<div class="jumbotron">
<h1>Contact</h1>
<h4>Here are a few ways you can contact me. I will update the page when I change anything.</h4>
</div>
</div>

<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
<!-- TWITTER -->
<img src="_twitter.png.png" alt="twitter" height="35" width="35"> <h4>Username</h4>
<!-- FACEBOOK -->
<img src="_facebook.png" alt="facebook" height="35" width="35"> <h4>Username</h4>
<!-- INSTAGRAM -->
<img src="_instagram.png" alt="instagram" height="35" width="35"> <h4>Username</h4>
<!-- ME -->
<div id="PhotoOfMe">
<img src="_Cherry.png" alt="Me" id="Me">
</div>
</body>
</html>


And my CSS code:

#Cherry {
color: black;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: DarkOrchid;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid White;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: PaleVioletRed;
}
.active {
background-color: PaleVioletRed;
}
/*JUMBOTRON*/
.jumbotron {
background-color: Sandybrown !important;
float: top;
}
.jumbotron, p + h1 {
color: black !important;
font-family: 'Happy Monkey', cursive;
}
/*BODY*/
body {
background-color: Peachpuff !important;
}
h2 {
font-family: 'Happy Monkey', cursive !important;
}
h4 {
}
#me {
float: right;
clear: right;
}


I'd appreciate all the help I can get!

Answer Source

For correct floating it needs to be at the top, then it will float right into whatever comes afterwards in the document, so if you push the #me container above the #email it's going to be aligned on the right side. Also in your HTML the id was uppercase Meand in the css it was lowercase #me.

So push it to the top and change it to lowercase:

...
<!-- ME -->
<div id="PhotoOfMe">
    <img src="_Cherry.png" alt="Me" id="me">
</div>
<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
...