How to float image inside div

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 is dynamically generated by the Drupal view, so I can’t change the output html in any way. I need to work with what's here. Here is the desired result:

Without any style in the picture, it looks like this:

I tried to create an image to make it 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 am doing something wrong, because this is what I get (with relative position):

and with absolute position:

I also tried putting the float in the “topmost” div class that contains the image, without position in 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 mistaken? If I had control over html, I would have done it differently, but I'm not sure how to deal with all of these nested divs.

CHANGE NEW SCREENSHOT FOR @WEX

This is what it looks like when I tried to use your code with html reordered - http://jsfiddle.net/mPa7z/

Answer 1

I will try to explain the “correct” way to use float so that you can understand why your method does not work.

In your post, you are trying to apply float: left to the <div> surrounding your image, but this method only works when the element that you are floating is primarily the elements you want to wrap around it. This "may" solve your problem, but this technique has problems if you try to use it to create two different columns - if the text on the right is higher than the floating element, the text on the right will be wrapped below it. So, you need to add another container around your non-floating items to make sure it is not completed. This solves your problem, but doesn’t really help if you can’t even edit your markup!

I would say that the technique that I 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; }​ 

Answer 2

If you have access to the view itself in Drupal, you can reorder the elements. When entering Drupal, open View (in Drupal 7: Structure> Views> Viewname), find Fields and click the triangle next to add, which will have a pop-up window, and then click reorder. You can then drag the photo field to the first element in the view, and then customize your CSS to place the image to the left.

Answer 3

Emmys

Instead of trying to get a headshot before float:left , have you considered making the rest of float:right ? This will give the impression that the image is floating to the left, without changing the layout in any way.

 div.speaker-list div.views-row > div.views-field { float:right; clear:both; } div.speaker-list div.views-row > div.views-field.views-field-field-headshot { float:none; clear:none; } 

The aforementioned CSS should work with this particular configuration without changing any other disrupted Drupal markup. To make sure that the other CSS does not interfere, I applied the maximum possible specifics. Since the headhot will return to the containing <div> , you do not need to resize it unless the storage is just too large (I don’t know without looking at your data). Finally, CSS is concise, so you can add any additional style you need for each element.

Hope this helps,

Fuzzicallogic

Answer 4

When you can move some code to a page somewhere else, you can take control of the HTML using jQuery. Then you can make changes to the DOM tree.

But I do not understand why you cannot edit HTML. Is Drupal Open Source? You should be able to find and manipulate the file using FTP.