Mehmet Mehmet - 20 days ago 7
CSS Question

How to locate image before list?

Hi! I have a list that is compromised of 5 items and a little photo. I want "foto.png" to sit before list.

Now, it looks like this:

enter image description here

What I want to do is:
enter image description here

Here is my codes:

<div class="headerbar">
<div class="profilephoto"><img src="/img/foto.png" width="60"></div>
<ul>
<li><a href="#"> Profile</a></li>
<li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
<li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
<li><a href="#">&#8226; &#8226; &#8226;</a></li>
<li><a href="#">QUIT</a></li>
</ul>
</div>


.headerbar {
text-align: right;
padding-top: 10px;

}
.profilephoto {
float: right;
margin: 0 auto;
}
.headerbar li {
color: white;
display: inline;
list-style: none;
margin: 7.5px;
font-weight: bold;
font-size: 18.5px;
font-family: "Dosis", Helvetica, sans-serif;
}
.headerbar li:last-child {
margin-right: 7.5px;
color: #ff5f5f;
}

Answer

You are floating foto.png to right...
Float both, .profilephoto and ul, to left, instead to right.