CSS - Alignment issues with image and text

http://stackoverflow.com/questions/29035562/css-alignment-issues-with-image-and-text

by Cătălin Dogaru

HTML

<section class="vertical_menu_bar_section">
  <div id="img_logged_in_user">
    <img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg" height="128" width="128" align="left">
    <p>FIRSTNAME SURNAME</p>
  </div>        
  <div id="vertical_menu">
    <ul>
       <li><a href="#"><span>CALENDAR</span></a></li>
       <li><a href="#"><span>TOTALS</span></a></li>
       <li><a href="#"><span>OPTION 3</span></a></li>
       <li><a href="#"><span>OPTION 4</span></a></li>
    </ul>
  </div>
<section>

CSS

.vertical_menu_bar_section {
  background: #ff0000;
  clear: both;
  color: #fff;
  font-family: "Trebuchet MS", Tahoma, Sans-serif;
  height: 100%;
  margin: 0;
}

#vertical_menu {
  background: #f0c;
  clear: both;
  font-family: "Trebuchet MS", Tahoma, Sans-serif;
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 250px;
}

#vertical_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#vertical_menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#vertical_menu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #fff;
  display: block;
  font-weight: normal;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
}

#vertical_menu a:hover {
  background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}

#img_logged_in_user {
  background: #2580a2;
  clear: both;
  display: block;
  float: left;
  width: 250px;
}

#img_logged_in_user > img {
  margin-right: 20px;
}