Изображение не всегда внутри DIV

Question

Я пытаюсь обернуть img с помощью div. Проблема в том, что изображение загружается слева от div. В настоящее время у меня есть изображение и div и знайте размер изображения до его загрузки. Размеры div устанавливаются на размеры изображения, но изображение загружается слева от div. Я пробовал все, даже добавляя вертикальное выравнивание к изображению, и ближайшая вещь, с которой я столкнулся, делала положение абсолютного div, которое просто загрузило div под текстом, который был справа от изображения. Я, вероятно, могу загрузить изображение в другом div внутри оригинала, но это может нанести вред SEO в моем случае.

Положения изображения

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

Это правильное поведение, вы позиционируете img совершенно -72px левый и 4px сверху.

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

Если вы хотите img быть внутри div, а затем удалить абсолютное позиционирование.

Если вы пытались переместить div, примените это позиционирование к нему, а не к img. При этом img также будет иметь такое же положение, что и ребенок.

jsFiddle example