2

I've been using CSS float property in many works/projects and in many a occasion I've come across clearing the floated element using either and extra html element at the end of the floated element and using clear:both; in the style for the extra element or by using clearfix (which is a common work-around for clearing floated element) or sometimes by using overflow:hidden in the parent's style.

Even though these solutions have worked for me on many occasions depending on the need but I'd really want to know more about these solutions and would appreciate if there are other ways of solving this.

For the sake of better understanding of the question I've created and fiddle and I would appreciate any suggestion or questions.

Fiddle In the fiddle, I've created 3 examples to explain the solutions I've been using. In example 3, I've used overflow: hidden but there are problems of using this solution. For instance, if I want some content to overflow its parent, I cannot do in this case.

Some lines of the CSS I'm using are:

.wrapper {
    width: 300px;
}
.sidebar {
    float: left;
    width: 100px;
    height: 300px;
    background-color:#f9b25e;
}
.content {
    margin-left: 100px;
    background-color:#45ca5f;
}
.column-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #448bcc;
}
.column-right {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #dd4444;
}


/* Example 1*/
.clearfix:after{
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* Example 2*/
.clear { clear: both; }


/* Example 3*/
.ex-3 .content{
    overflow: hidden;
}
Rupam Datta
  • 1,849
  • 1
  • 21
  • 36
  • In 10+ years of frontend development, I haven't stumbled upon a single floating issue which couldn't be solved by using `.clearfix`, so I never needed to try a different approach. – connexo May 20 '15 at 06:32
  • hey @connexo, I agree with what you said about using `.clearfix`. But in a few cased I found out, it does not work properly. For instance, I've a sidebar `div` which is floated left and a content `div` which is not floated. I'm using a couple of floated `div` inside the content `div`. If you observe my example 2 in the fiddle, using `.clearfix` actually is not working properly. Since there is a floated `div` sidebar, the content `div` has a height equal to the height of the sidebar `div`. – Rupam Datta May 20 '15 at 06:49
  • Duplicate of http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best ? – Salman A May 20 '15 at 06:55
  • Imo your mistake (and problem) is that your layout is not a propely `float`layout as your `content`is not floating (and it's quite ugly your `margin-left:100px`). imo this may be the best solution http://jsfiddle.net/alvaromenendez/hg2gzLha/2/ – Alvaro Menéndez May 20 '15 at 07:19
  • @AlvaroMenéndez Yes by adding `float` to the `.content` fixes the problem but them I want the `.content` to take the full width left in the page. Here is an example. http://jsfiddle.net/ardeezstyle/hg2gzLha/3/ – Rupam Datta May 20 '15 at 08:10
  • @SalmanA The questions are very similar but not exactly same. I am looking for some better answers because the solutions I mentioned in the OP are sometimes not the best solutions. – Rupam Datta May 20 '15 at 08:24
  • @RupamDatta I think the accepted answer lists the pros and cons of each solution. Looking for "best" puts this question in the "primarily opinion based" category. – Salman A May 20 '15 at 08:29
  • 1
    Well, if you can use freely css3 you may still give your `content`(when floating) a `width:calc(100% - 100px);`(beign 100px the fixed width of your sidebar): http://jsfiddle.net/alvaromenendez/hg2gzLha/5/ – Alvaro Menéndez May 20 '15 at 08:39
  • @AlvaroMenéndez +1 for your comment. This will certainly help reduce a lot of problems. – Rupam Datta May 20 '15 at 08:50

1 Answers1

-1

Rows, columns and floating things have been well taken care of with things like twitter bootstrap. Using this not only takes the guess work out of it, but also ensures your layouts will look the same cross-browser.

This is a better way to do things in general because then you also have some graceful breakpoints all the way down to mobile.

You don't need to use everything bootstrap has (although I would recommend that too!) you can just use their grid system.

http://getbootstrap.com/css/#grid

MTOBEIYF
  • 1
  • 1