CSS - Alignment issues with image and text - css

Question

Below is a screenshot indicating the manner I intend on placing an image and text above a list.
my desired design
Below is my screenshot in terms of my misalignment problem.
my alignment problems
Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:
<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>
Below is my CSS:
/* Section - Vertical menu bar */
.vertical_menu_bar_section {
color: #FFFFFF;
background: #FF0000;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin: 0;
height: 100%;
}
#vertical_menu {
background: #FF00CC;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
font-size: 20px;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
}
#vertical_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu li {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu a {
background: #333;
border-bottom: 1px solid #393939;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#vertical_menu a:hover {
background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* */
#img_logged_in_user {
clear: both;
display: block;
float: left;
background: #2580a2;
}
Any ideas as to where I'm going wrong.
Thanks.

Answer 1

Please check if this is what you need
Fiddle
For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned
Also added a <span> so the user name wont get below the pic.

Answer 2

To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):
#img_logged_in_user {
width: 250px;
}
Then set the image margin to add a spacing between them:
#img_logged_in_user > img {
margin-right: 20px;
}
See live example here: http://jsfiddle.net/cdog/sbu24c45/.