Forum Moderators: not2easy
with this code below I show a portrait and some personal data on the right hand side of the photo.
<div id="member">
<div id="portrait" style="float:left">
<img src="uploads/fotografias_miembros/luis.jpg" alt="">
</div>
<div id="data" style="margin-top: 5px">
Luis
</div>
</div>
When i give a value to the margin-top of the "data", the "portrait" is also "margined-top", i mean: it is like i give also the same margin-top value to the photo.
I only want to "margined-top" the personal data, so what should i do?
Regards
Javi
Do you know what height you'll want "portrait" to be? How is the height of the two div's determined?
You might be able to put the two divs inside a table (rather than using float) with no space between the cells and no border. Then you'd set table height and cell widths to whatever you want, and portrait's style to "height:100%;".
I'm guessing your seeing a bug in IE?
Are you thinking about a margin from an element we are assuming is above the 'member' div on the page?
Not trying to be difficult, just confused... :)
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In other words, the two elements that are side by side can still have a collapsing top-margin.
Collapsing Margins can be a difficult concept to grasp.
the spec you posted states
Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Do you have Firebug for Firefox? If not, I would start by getting that, and using it to inspect each box to see what style rules are being applied to each. That might shed more light on it.
