Image isn't always inside DIV

Question

I'm trying to wrap an img with a div. The problem is that the image loads left of the div. I currently have an image and div and know the image size prior to it being loaded. The div dimensions are set to the image's dimensions, but the image is loading left of the div. I've tried everything even adding a vertical-align to the image and the closest thing I came across was making the position of the div absolute which just loaded the div under the text which was right of the image. I probably can load the image in another div inside the original but that might harm SEO in my case.

Position of the image

HTML

<ul id="UL_1" class="ab-submenu">
    <li id="LI_2">
        <a class="ab-item" tabindex="-1" href="http://techdigy.com/wp-admin/profile.php" id="A_3"></a>
        <div class="avatar-holder" id="DIV_4">
            <img alt="" src="http://1.gravatar.com/avatar/95fef2e7b4a23f9cc0439619db1af0a6?s=64&amp;d=identicon&amp;r=G" class="avatar avatar-64 photo" height="64" width="64" id="IMG_5" />
        </div><span class="display-name" id="SPAN_6">Andre</span>
    </li>
    <li id="LI_7">
        <a class="ab-item" href="http://techdigy.com/wp-admin/profile.php" id="A_8">Edit My Profile</a>
    </li>
    <li id="LI_9">
        <a class="ab-item" href="http://techdigy.com/wp-login.php?action=logout&amp;_wpnonce=c7d2e50651" id="A_10">Log Out</a>
    </li>
</ul>

CSS

#UL_1 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(204, 204, 204) none 0px;
    padding: 6px 0px;
    position: relative;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#UL_1*/

#LI_2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 6px 16px 15px 88px;
    outline: rgb(204, 204, 204) none 0px;
    position: relative;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#LI_2*/

#A_3 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(33, 117, 155);
    color: rgb(33, 117, 155);
    display: block;
    font: normal normal normal 13px/26px sans-serif;
    line-height: 26px;
    list-style: none outside none;
    min-width: 140px;
    outline: rgb(33, 117, 155) none 0px;
    padding: 0px 12px 0px 8px;
    text-align: left;
    text-decoration: none;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#A_3*/

#DIV_4 {
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: 64px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(204, 204, 204) none 0px;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    white-space: nowrap;
    width: 64px;
}/*#DIV_4*/

#IMG_5 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    display: block;
    font: normal normal normal 13px/28px sans-serif;
    height: 64px;
    left: -72px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(204, 204, 204) none 0px;
    position: absolute;
    text-align: left;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    top: 4px;
    transition: none 0s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    width: 64px;
}/*#IMG_5*/

#SPAN_6 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    color: rgb(51, 51, 51);
    display: block;
    font: normal normal normal 13px/28px sans-serif;
    height: 18px;
    line-height: 28px;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
    text-align: left;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#SPAN_6*/

#LI_7, #LI_9 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(204, 204, 204);
    color: rgb(204, 204, 204);
    font: normal normal normal 13px/28px sans-serif;
    height: auto;
    line-height: 28px;
    list-style: none outside none;
    margin: 0px 16px 0px 88px;
    outline: rgb(204, 204, 204) none 0px;
    position: relative;
    text-shadow: rgb(68, 68, 68) 0px -1px 0px;
    transition: none 0s ease 0s;
    width: auto;
    z-index: 99999;
}/*#LI_7, #LI_9*/

#A_8, #A_10 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(33, 117, 155);
    color: rgb(33, 117, 155);
    display: block;
    font: normal normal normal 13px/26px sans-serif;
    height: 26px;
    line-height: 26px;
    list-style: none outside none;
    min-width: 140px;
    outline: rgb(33, 117, 155) none 0px;
    padding: 0px 12px 0px 8px;
    text-align: left;
    text-decoration: none;
    transition: none 0s ease 0s;
    white-space: nowrap;
}/*#A_8, #A_10*/

Answer 1

This is the correct behavior, you are positioning the img absolutely -72px left and 4px from the top.

#IMG_5 {
    position:absolute;
    left: -72px;
    top: 4px;
}

If you want the img to be inside the div, then remove the absolute positioning.

If you were trying to move the div apply this positioning to it as opposed to the img. In doing so, the img will also have the same position, as it is a child.

jsFiddle example