Question

I have this html:

<div class="speaker-list">
    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">   
            <div class="views-field views-field-title">
                <span class="field-content">
                    <a href="/speaker/keith-anderson">Keith Anderson</a>
                </span>
            </div>  
            <div class="views-field views-field-field-job-title">
                <div class="field-content">VP, Digital Advisory</div>
            </div>  
            <div class="views-field views-field-field-company">
                <div class="field-content">RetailNet Group</div>
            </div>  
            <div class="views-field views-field-title-1">
                <span class="field-content">
                    <a href="/session/store">Store of the Future</a>
                </span>
            </div>  
            <div class="views-field views-field-field-headshot">
                <div class="field-content">
                    <div id="file-53" class="file file-image file-image-jpeg contextual-links-region"> 
                        <div class="content">
                            <img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>

It’s dynamically generated by a Drupal view, so I can’t change the output html at all. I need to work with what is here. Here’s the desired result:

Without any styling on the headshot, this is what it looks like:

I tried to style the image to force it to float to the left of the text:

.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;
}

Obviously I’m doing something wrong, because this is what I get (with relative position):

and with absolute position:

I’ve also tried putting the float on the “uppermost” div class that holds the image, with no position on the div:

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

It gives the same result as the position: relative screenshot.

Where am I going wrong? If I had control over the html I’d do it differently, but I’m not sure how to deal with all of these nested divs.

EDITED TO ADD NEW SCREENSHOT FOR @WEX

Here’s what it looks like when I tried to use your code with the html reordered – http://jsfiddle.net/mPa7z/

Answer 1

I’ll try to explain the “right” way to use float so that you can see why your way didn’t work.

In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That “may” solve your problem, but that technique has it’s pitfalls if you’re trying to use it to create two distinct columns – if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won’t wrap. This solves your problem, but doesn’t really help if you can’t even edit your markup!

I’d argue that the technique I’ve posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/

.view-content { 
    position: relative;
    min-height: 180px;
    padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
    position: absolute;
    top: 0;
    left: 0; }​