6

I've a sequence of elements and the last one has css "float:left".

I would like to display it at the same height of the first element and not on the bottom of the list. (I cannot change the html code, so it is the last in the list).

At the same time, I would like to keep it on the right. How can I make it wich CSS ?

thanks

Code:

 <div class="field field-type-text field-field-year">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Year:&nbsp;</div>
                    2009        </div>
        </div>
</div>
<div class="field field-type-text field-field-where">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Where:&nbsp;</div>
                    Musée Rath, Geneva        </div>
        </div>
</div>
<div class="field field-type-text field-field-when">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              When:&nbsp;</div>
                    25.8 – 27.9.2009        </div>
        </div>
</div>
<div class="field field-type-text field-field-editor">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Editor:&nbsp;</div>
                    Blabla Blabla        </div>
        </div>
</div>
<div class="field field-type-text field-field-material">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Material/techniques:&nbsp;</div>
                     contemporary art installations        </div>
        </div>
</div>
<div class="field field-type-text field-field-dimension">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Dimension:&nbsp;</div>
                    2 floors in a neoclassical building        </div>
        </div>
</div>
<div class="field field-type-text field-field-artists">
    <div class="field-items">
            <div class="field-item odd">
                      <div class="field-label-inline-first">
              Artists:&nbsp;</div>
                    Blablablabla balbalbalbalba
        </div>
        </div>
</div>


    .field-field-year, .field-field-where, .field-field-when, .field-field-editor, .field-field-material, .field-field-dimension {
        width:300px;
    }



    .field-field-artists {

        width:400px;
        float:right;
        clear:right;
        top-margin: -200px;
    }
Mark Walters
  • 10,729
  • 6
  • 31
  • 47
aneuryzm
  • 55,858
  • 96
  • 259
  • 471

2 Answers2

8

you have a small error, make it:

.field-field-artists { 

        width:400px; 
        float:right; 
        clear:right; 
        margin-top: -200px; 
    }
Mark Schultheiss
  • 28,892
  • 9
  • 63
  • 88
  • damn, ok thanks. I have 2 questions: 1) is it a good solution for IE ? 2) if the content of the previous fields change, the height changes and top margin needs to be updated, right ? So... is there another solution ? – aneuryzm Apr 23 '10 at 12:54
  • Yes, it will change if the size changes. In order to do this better(dynamic), you would need some javascript I think. The other option is to put the others inside a div, and float the last one on the right of that group - but that changes the structure (ok if you control that I would think) – Mark Schultheiss Apr 23 '10 at 13:31
2

You could float the last field to the right and the others to the left (assuming there is enough horizontal space) or use absolute positioning or reorder the blocks with javascript; but since this is apparently Drupal, can't you just reconfigure the field weights?

Tgr
  • 25,494
  • 11
  • 77
  • 108