Posted by couturier on December 18, 2013 at 3:27pm
Start:
2013-12-19 19:30 - 21:30 America/Chicago Organizers:
Event type:
User group meeting
It's the week before Christmas, and Oklahoma Drupalers will still be meeting on the 3rd Thursday of the month, December 19, 7:30 to 9:30 p.m. Garron Rose and Justin Tucker will be presenting on graphics. This is your day-in-advance notice.
We are looking forward to all of you joining us this Thursday. As always, it is at the Francis Tuttle Technology Center on Rockwell (a big thanks and shout-out to FT). Room location may change without notice. Ask at the front desk or look around on both the first and second floors if you do not see us in room B-1130 of the Technology building.
Location:
Francis Tuttle Technology Center
Building 3, Room B-1130
12777 North Rockwell Avenue
Oklahoma City, OK 73142
(405) 717-4900
Comments
Block formatting contexts - the magic we were missing
Turns out our overflow:hidden css trickery and clear on a non-float giving the appearance of clearing proceeding blocks are sorta related via the BFC.
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
Better explanation of BFC: http://stackoverflow.com/questions/6196725/how-does-the-css-block-format...
<img style="float:left;" />
<img style="float:right;" />
<p>.....</p>
overflow:hidden changes the BFC and makes the p responsible for the layout of it's children. Since it is now responsible for it's contents and blocks can't be a T shape, it forces the contents into a rectangular. This also means you could add an overflow:hidden on an wrapper with floated children to get your wrapper borders to show up.
<style>
div {
height: 50px;
margin: 5px;
width: 50px;
}
</style>
<div style="background-color: red; float: left;">A</div>
<div style="background-color: blue;">B</div>
<div style="background-color: green; float: left;">C</div>
This gives the appears of C floating to the right of B but it's not. Since B isn't a float (no BFC) it's not responsible for it's children and that causes this deception. It's cowardly hiding A with it's children left undefended. C is really floating to the right of A and the bottom of B (which is behind A). This is verifiable by:
- change width of A and C's horizontal position updates
- lower height of B and C's vertical position updates
- set height of B to 60px (A's height + margin) and C moves far enough down that it can't float left of A anymore
Adding clear:both or :left to B just works by moving it out from behind A and below it. This means C can't flow off of A since it's now below it. Same effect as when we increased the height of B to 60px.
Add overflow:hidden to B to give it BFC and you can really see what's really going on.
I still don't totally understand BFC but it's cool to start that understanding process and I think it's key to both of these "features" of css that we were discussing.
Kenny
[edited to escape html examples]
Sorry, had to edit to escape html.
Sorry, had to edit to escape html.
Correct code examples were:
<img style="float:left;" />
<img style="float:right;" />
<p>.....</p>
and
<style>
div {
height: 50px;
margin: 5px;
width: 50px;
}
</style>
<div style="background-color: red; float: left;">A</div>
<div style="background-color: blue;">B</div>
<div style="background-color: green; float: left;">C</div>
Sorry, had to edit to escape html.
Sorry, had to edit to escape html.
Correct code examples were:
<img style="float:left;" />
<img style="float:right;" />
<p>.....</p>
and
<style>
div {
height: 50px;
margin: 5px;
width: 50px;
}
</style>
<div style="background-color: red; float: left;">A</div>
<div style="background-color: blue;">B</div>
<div style="background-color: green; float: left;">C</div>