display: inline-block is used in a number of clearfixes (1, 2), though none of those articles explain why it makes an element clear after itself. Why is it so?
I've looked through the spec, and haven't found any definitive explanation on that matter.
This example illustrates the behavior in question (consistent in IE9, and the latest versions of Chrome and Firefox):
<div style="display: inline-block;">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
<hr/>
<div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
Inline-block elements establish new block formatting contexts for their contents. A block formatting context root always tries to contain its floats if sized automatically; see section 10.6.7 of the spec:
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.
This is what makes an inline block able to contain its floats; no clearance is actually involved since no clearing element is introduced after the floating children.
Related
Recently I am learning some stuff about CSS,I found some awesome tricks about overflow:
Set parents of float elements to overflow:hidden or overflow:auto can keep parents from collapsing
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
make two columns have same height,set a big enough padding at the bottomof each floated element, and countering it with an equal negative margin at the bottom of the same elements. The trick is to set the overflow on the parent container to hidden
I can not image how it work,why is overflow so obscure? someone can explain it?
The clearfix behavior you describe in 1 is a well known properties of overflow as you can see here: https://css-tricks.com/almanac/properties/o/overflow/#article-header-id-6 and http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ and this is an expected behavior, since it is part of the CSS 2.1 spec: https://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#root-height (see the last sentence of the 10.6.7 'Auto' heights for block formatting context roots paragraph)
The 2 is (as #alohci says in the comment) the overflow: hidden expected behavior.
For further details you can read the official spec: https://www.w3.org/TR/CSS22/visufx.html#overflow
I've asked similar question here: CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first), but that's one is more difficult, I find out that I can't use overflow hidden for it because there are popup in elements. Here description: I have several containers and need shrink only first div if not enough space for all of them, here example which works perfectly for me in Firefox and Chrome, but not in IE: https://plnkr.co/edit/Fg5P96r75soAVlDUf1LG?p=preview:
<div class="container">
<div class="container2">
<div class="first">first div content</div>
<div class="second">second div content</div>
</div>
<div class="third">third div content</div>
</div>
Is there any simple solution to fix it in IE 11?
I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.
I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.
Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.
This is the HTML used with the CSS grid layout:
<div class="container-12 clear">
<header class="grid-12">Header</header>
<nav class="grid-4">Nav</nav>
<section class="grid-8">Content</section>
<footer class="grid-12">Footer</footer>
</div>
This is the HTML used with the Flexbox layout:
<div class="main-container">
<header>Header</header>
<div class="site-content">
<nav>Nav</nav>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
Notice the <div class="site-content"> around the nav and section elements.
So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?
I'm trying to achieve the same layout with the same HTML but different CSS techniques.
Here are the demos:
Basic Layout Using a CSS Grid
Basic Layout Using Flexbox
Thanks for any guidance on this.
The answer is simple: Yes, that extra wrapper is required.
I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:
Using flexbox often requires an extra div or two, because the parent of any flexbox element needs to have display set to box. Before, you could get away with the following:
<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>
Now with flexbox, you’ll need:
<div style="display: box">
<div style="width: 250px"> Content here </div>
<div style="width: 250px"> Content here </div>
</div>
Many of you have already turned away, insulted by this extra mark-up that is purely for presentation. That’s understandable. But here’s the thing: once you master the CSS, this extra containing div becomes a small price to pay. Indeed, you’ll often already have a containing element (not necessarily a div) to add display: box to, so there won’t be a trade-off at all.
Extract taken from CSS3 Flexible Box Layout Explained
Thanks.
This is a bit complicated, and is a Chrome specific issue (jsFiddle for reference).
I have some html that is a container which houses three DIVs:
one header div (which must grow and shrink to the size of the container)
one "child" div (which is always in the top left corner, but otherwise acts like a child div)
and one "child-container" div that houses zero-to-many child divs (which should float left and then wrap after the fifth item)
<div id="container">
<div class="header">cool header</div>
<div class="child">child 0</div>
<div id="child_container">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
</div>
</div>
The issue that I'm having is when there are 5 or fewer "child" divs. If there are more than 5 "child" divs, everything formats properly. If there are fewer than 5 "child" divs, then the last "child" will always appear underneath the "child 0" div. What I need is the "child" divs to NOT warp to a second line until there are greater than five children.
I've tried a several different approaches (ie, different display types, floating containers, not floating all children, etc.), but no matter what I try, either the "header" class doesn't size properly or the children don't wrap properly.
Suggestions?
Solved Check Demo
Giving min-width: attrib solves the issues check the different wrap numbers
Its the Container width which dictates when it wraps you currently gives max limit
EDIT:Even though its chrome specific issue in chrome it is solved by giving min-width:
Demo Which Shows the difference with and without min-width
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/