Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a...

I've been using flexbox for layouts, with CSS floats as a fallback for older browsers. On the whole this works well, since browsers that understand display: flex will ignore float on any flex items...

I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar. <div id="container"> <div id="content"...

I apologize because this seems like such a simple thing. What's the correct way to insert a newline in a way that the next element is on a newline? It seems like some things automatically do this ...

.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-hei...

You are aware of the age-old problem: Containers containing floated elements don't automatically expand their height to enclose their children. One approach to fix this is the "clearfix" which add...

In short: Basically, I just want to know why overfow:hidden explands the container containing a floated item. Shouldnt it hide the overflowing element like in this image http://css-tricks.com/wp-c...

I'll adapt my self to what 52framework.com offers. (HTML5, CSS3, JS framework) Despite watching grid tutorial video and inspecting other demo source codes, I couldn't understand why framework used ...

I use clearfix to clear the float. But the problem is ,there is a different height in <li> and <div>. li.clearfix height is 32px, but div.clearfix height is 18px. when I delete .clearfi...

Most of the clearfix techniques out there involves adding things at the very bottom of the parent container, and I prefer the pseudo element approach the most since it doesn't add unneeded el...

I have an issue with twitter bootstrap that looks a little bit strange to me. I have a sidebar with fixed with at the left side and a main area. <div> <div id="sidebar"> <ul> ...

I want to remove the clearfix class from my HTML and include a clearfix mixin in my SCSS (Rails 3.1 application). What is the best approach to this? I am thinking of just taking the HTML 5 Boiler...

I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is : <div class="pull-left">This is a text</div> <hr class="clearfix" /> What i am expec...

My problem is the following: The border does not wrap the containing items. I know this is because I position the content-item absolute, but I need them to be absolute for the layout to work. This ...

First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve: http://jsfiddle.net/bb_matt/VsH7X/ Here's the explanation - my rationale: I'm creating a responsive sit...

I've seen div tags use a clearfix class when it's child divs use the float property. The clearfix class looks like this: .clearfix:after { clear: both; content: "."; display: block; heig...

I have a form layout that I want to display the label aligned left and the form control aligned right. I have been trying to get it to work using a float:right on the form control (in this case a )...

960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference? Here's the clearfix found in Nathan Smith's 960 grid's css: /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloade...

I am using yaml for layout and famous clearfix css to make sure container with floats get extended. Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issu...

Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them. I know abou...

What's the modern way to clear floated content these days? There's the "recent" modern way of adding a ".clearfix" on the parent element to clear the contained floats and that would work great. In...

Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent el...