Question

I am stuck with some CSS.
I need this:

But I have this (applying float:left to the image):

The HTML is generated by Drupal so I can’t change its structure:

<div class="content clearfix">
    <div class="field field-name-field-gallery-work-order field-type-image field-label-hidden">
        <div class="field-items">
            <div class="field-item even"><img typeof="foaf:Image" src="http://www.gcca.eu/sites/default/files/styles/stories-field-thumb/public/ACP/workorders/rwanda_photo_2_land_registration_programme_gcca_eud.jpg" width="200" height="150" alt=""></div>
        </div>
    </div> 
    <div class="field field-name-field-country-media field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Country:</div>
    <div class="field-items">
        <div class="field-item even">Madagascar</div>
    </div>
</div>
<div class="field field-name-field-region field-type-list-text field-label-inline clearfix">
    <div class="field-label">Region:&nbsp;</div>
    <div class="field-items">
        <div class="field-item even">Africa</div>
    </div>
</div>
...

And I have the folloing styles set to the image:

.node-work-order .field-type-image img {
   float: left;
   margin: 0 15px 5px 0;
}

.field-type-image img {
    background: #F3F0E8;
    border: 1px solid #DAC5B4;
    padding: 10px;
    margin: 0 0 10px 0;
}

How can I align the region and other attributes under Country and to the right of the image?

Answer 1

put a float:left on the image container, not on the image:

.field-type-image{
    float:left;
}    

 .field-label-inline{
    margin-left: 280px; /* width of the image */
}

Or if the width of the image varies, you can keep the content aligned with a hidden overflow:

.field-type-image{
    float:left;
}    

.field-label-inline{
    overflow:hidden;    
}