Как разместить изображение внутри div

У меня есть этот html:

    

        
   
            

                
                    Keith Anderson
                
            
  
            

                
VP, Digital Advisory
            
  
            

                
RetailNet Group
            
  
            

                
                    Store of the Future
                
            
  
            

                

                    
 
                        

                            
                        
                    
                
             
        
    

Он динамически генерируется представлением Drupal, поэтому я не могу изменить выходной html в все. Мне нужно работать с тем, что здесь. Вот желаемый результат:

Без каких-либо стилей на хедшоте это выглядит так:

Я попытался стилизовать изображение так, чтобы оно плавало слева от текста:

.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
    border: 1px solid #666;
    float: left;
    position: relative; /* tried with and without position (inc. absolute) */
    left: 30px;
}

Очевидно, я делаю что-то не так, потому что вот что я получаю (с относительным положением):

и с абсолютным положением:

Я также пытался поместить float в «самый верхний» класс div, который содержит изображение, без позиции в div:

.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
    float: left;
}

Это дает тот же результат, что и position: относительный снимок экрана.

Где я ошибаюсь? Если бы у меня был контроль над html, я бы сделал это по-другому, но я не уверен, как справиться со всеми этими вложенными элементами div.

ОТРЕДАКТИРОВАНО, ЧТОБЫ ДОБАВИТЬ НОВЫЙ СКРИНШОТ ДЛЯ @WEX

Вот как это выглядит, когда я попытался использовать ваш код с переупорядоченным html - http://jsfiddle.net/mPa7z/