Databases
StackOverflow2013
Postsdbo
POCSS: move a "float:right" element to top (to align with the first element of the list)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: move a "float:right" element to top (to align with the first element of the list)
    text
    copied!<p>I've a sequence of elements and the last one has css "float:left".</p> <p>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).</p> <p>At the same time, I would like to keep it on the right. How can I make it wich CSS ?</p> <p>thanks</p> <p>Code:</p> <pre><code> &lt;div class="field field-type-text field-field-year"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Year:&amp;nbsp;&lt;/div&gt; 2009 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-where"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Where:&amp;nbsp;&lt;/div&gt; Musée Rath, Geneva &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-when"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; When:&amp;nbsp;&lt;/div&gt; 25.8 – 27.9.2009 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-editor"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Editor:&amp;nbsp;&lt;/div&gt; Blabla Blabla &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-material"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Material/techniques:&amp;nbsp;&lt;/div&gt; contemporary art installations &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-dimension"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Dimension:&amp;nbsp;&lt;/div&gt; 2 floors in a neoclassical building &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field field-type-text field-field-artists"&gt; &lt;div class="field-items"&gt; &lt;div class="field-item odd"&gt; &lt;div class="field-label-inline-first"&gt; Artists:&amp;nbsp;&lt;/div&gt; Blablablabla balbalbalbalba &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; .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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload