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: </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: </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: </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: </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: </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: </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: </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;
}
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
you have a small error, make it:
.field-field-artists {
width:400px;
float:right;
clear:right;
margin-top: -200px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With