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??
He only wanted the top margin to happen on data, not on #portrait. Since data wasn’t floated it was snagging on #portrait so the top margin applied to both.
Floating data fixes it (I tested in Opera when I initially tested it)
Hi,
The code snippet you gave is really just a bare bones version that will have other problems too. You will need to contain your floated portrait div within your member div. If you use overflow:hidden for float containment there it will also establish clearance for your top margin on the data div. You would also need some haslayout triggers for IE6/7.
If you float your data div also as Ryan mentioned you would need to set a width to prevent it from shrink wrapping. It really depends on what your desired effect is for your finished code as to whether or not a float on the data div is a viable option for you. If you want a fluid width set up then you would not want a float there.
Here is a fluid width version with text that can drop below the image without wrapping.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>User Image and Data Text</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
background: #fff;
font-size:100%;
padding-bottom:20px;/*simulate bottom margin on wrapper for IE*/
}
#wrapper{
width:80%;
min-width:600px;/*no support for ie6*/
margin:20px auto 0;
background:#CDF;
border:1px solid #000;
}
.member {
overflow:hidden;/*contain inner floats and establish .data margin clearance (and IE7 haslayout)*/
background:#CDF;
padding-bottom:5px;
border-bottom:1px solid #000;
}
.portrait{
float:left;
margin-right:5px;/*margin for .data*/
}
.portrait img{/*for testing without actual image*/
display:block;
width:150px;
height:150px;
background:lime;
}
.data{
margin:5px 5px 0 0;
overflow:hidden;/*stop text from wrapping under .portrait float (and IE7 haslayout)*/
background:yellow;
}
.data p{margin:0 5px 5px}
#last{border-bottom:0;}
</style>
<!--[if IE 6]>
<style type="text/css">
.member,.data {height:1%; overflow:visible;}/*ie6 haslayout*/
.portrait{margin-right:2px;}/*ie6 3px jog (reset from main css)*/
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="member">
<div class="portrait">
<img src="uploads/fotografias_miembros/luis.jpg" alt="User Image">
</div>
<div class="data">
<p>Luis ipsum dolor sit amet consectetuer tempor ac ipsum lacus felis. At laoreet In eget
malesuada nec quis vel justo Vestibulum eu. Augue lacinia malesuada Morbi ut sit purus quis
Sed Aenean ut. Tellus amet pretium mauris sed ante mattis eget adipiscing Lorem metus.
Et sem et odio Praesent ornare velit Donec tortor dui leo. Felis sodales vitae nibh Sed
semper mauris vel ultrices pede nec. Sed lacus.</p>
<p>Luis ipsum dolor sit amet consectetuer tempor ac ipsum lacus felis. At laoreet In eget
malesuada nec quis vel justo Vestibulum eu. Augue lacinia malesuada Morbi ut sit purus quis
Sed Aenean ut. Tellus amet pretium mauris sed ante mattis eget adipiscing Lorem metus.
Et sem et odio Praesent ornare velit Donec tortor dui leo. Felis sodales vitae nibh Sed
semper mauris vel ultrices pede nec. Sed lacus.</p>
</div>
</div><!--end member-->
<div class="member">
<div class="portrait">
<img src="uploads/fotografias_miembros/luis.jpg" alt="User Image">
</div>
<div class="data">
<p>Luis ipsum dolor sit amet consectetuer tempor ac ipsum lacus felis. At laoreet In eget
malesuada nec quis vel justo Vestibulum eu. Augue lacinia malesuada Morbi ut sit purus quis
Sed Aenean ut. Tellus amet pretium mauris sed ante mattis eget adipiscing Lorem metus.
Et sem et odio Praesent ornare velit Donec tortor dui leo. Felis sodales vitae nibh Sed
semper mauris vel ultrices pede nec. Sed lacus.</p>
</div>
</div><!--end member-->
<div class="member" id="last">
<div class="portrait">
<img src="uploads/fotografias_miembros/luis.jpg" alt="User Image">
</div>
<div class="data">
<p>Luis ipsum dolor sit amet consectetuer tempor ac ipsum lacus felis. At laoreet In eget
malesuada nec quis vel justo Vestibulum eu. Augue lacinia malesuada Morbi ut sit purus quis
Sed Aenean ut. Tellus amet pretium mauris sed ante mattis eget adipiscing Lorem metus.
Et sem et odio Praesent ornare velit Donec tortor dui leo. Felis sodales vitae nibh Sed
semper mauris vel ultrices pede nec. Sed lacus.</p>
<p>Luis ipsum dolor sit amet consectetuer tempor ac ipsum lacus felis. At laoreet In eget
malesuada nec quis vel justo Vestibulum eu. Augue lacinia malesuada Morbi ut sit purus quis
Sed Aenean ut. Tellus amet pretium mauris sed ante mattis eget adipiscing Lorem metus.
Et sem et odio Praesent ornare velit Donec tortor dui leo. Felis sodales vitae nibh Sed
semper mauris vel ultrices pede nec. Sed lacus.</p>
</div>
</div><!--end member-->
</div><!--end wrap-->
</body>
</html>
Anyway, I’ve been googling and I cant find it the sense to your solution… It seams a very personal solution to something that is not well done by CSS creators group…What do you think?
That would have been my suggestion - I have had a similar issue with a website I’ve built recently.
The reason the image is being shifted down with the original code is because it is floated in relation to the content in the data div. Because the data div has a top margin, the entire contents of the div is shifted down, and the portrait div is floated relative to that.
By replacing the margin with padding, you have the contents of the data div starting at the top, ensuring that the floated portrait is in the right place, and the padding is inside the element to ensure that the contents are also displayed in the right place.
OP, go google “float containment” and you will get your results.
If you see a technique that’s not overflow:hidden; in there…well…they do the exact same thing (different side effects though) so you can put 2+2 together :).
I once ran across some mailing list where people were discussing why Paul’s overflow solution worked… Anne van Kesteren initially thought it was some bug, and then someone else said “well of course once a box needs to deal with overflow, it’s simply required to know where it’s children are of course… otherwise it can’t deal with overflow, can it?” and they were digging into the specs for strange gems of ancient wisdom… was fun to read.
[…] an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space
It’s important to distinguish the differences between the ‘overflow’ method and the ‘generated content’ (:after) method, however.
Some property/value pairs give an element the ability to establish a new block formatting context (BFC). These property/value pairs are:-
If an element were to establish a new block formatting context using one of property/value pairs listed above, then it would be subject to the aforementioned block formatting context requirement in the float specification (which guarantees float containment). The only reason why ‘overflow’ is primarily used in this context, is that it doesn’t have any effect on the computed width of an element - this is crucial if you want to retain the default ‘expand-to-fit’ width of an in-flow block box. In contrast, you’ll notice that all other properties that can establish new BFCs, alter an element’s computed width; you can use any of these properties if, you don’t care about retaining the ‘expanding-to-fit’ computed width or you do, but don’t have any fixed horizontal ‘padding’, ‘border’, or ‘margin’ values, in which case you could add ‘width:100%’ to the element to emulate the ‘expand-to-fit’ computation.
There are also other specifications that BFCs are subject to. One of these areas is margin collapsing, where there are specific rules in place dictating how some of the aforementioned property/value pairs are affected by margin collapsing. For example, margins of elements with ‘overflow’ values other than ‘visible’ applied don’t collapse with their in-flow children, whereas inline-blocks, floated elements are subject to tighter restrictions; any margins applied to these don’t collapse with any adjacent siblings, as well as any in-flow children.
With this method, we also have to contend with it’s main function - controlling the clipping of overflowing content. This can be a problem if you require descendants of an element to extend beyond it’s content box (in the case of absolute positioning, this is only an issue in the common case of negatively offsetting a descendant relative to one of it’s ancestors (which has ‘overflow: hidden | auto | scroll’ applied) and when that ancestor also establishes itself as the containing block).
The method of using ‘overflow’ in this way was in fact brought up recently on www-style@w3.org. As a result of this, I am now involved in trying to push a proposal through which would establish a new control (as an interim solution) whose sole purpose is to contain floats, whilst having no side effects. This solution would be subject to the float specification requirement specific to block formatting contexts, which would mean we could have a single control (like we currently have with ‘overflow’) which can operate using boolean values - for example, ‘float-contain: auto | contain’.
Anyway, I hope that this gives you some detail in regards to the pitfulls associated with using ‘overflow’ in the context of float containment
James, I was referring to methods other then :after and overflow (though those 2 included :)). Such as a clearing div or inline-block as you showed (anything that establishes a new block formatting context, display:table also)
I do beleive a new property should be used just for float containment, because while overflow usage of containment is nifty, it also wasn’t its’ intended purpose. Other methods are available but I feel as if a property should exist for this purpose.
