Comments on: Float and Clear: A comparison of CSS clearing techniques http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/ Tue, 27 Jul 2010 10:27:14 +0000 http://wordpress.org/?v=2.9.1 hourly 1 By: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-20229 Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know Wed, 04 Mar 2009 20:58:53 +0000 http://www.dave-woods.co.uk/?p=133#comment-20229 [...] 9. Float and Clear: A Comparison of CSS Clearing Techniques [...] [...] 9. Float and Clear: A Comparison of CSS Clearing Techniques [...]

]]> By: Dave Woods - Freelance Web Designer UK » Queen’s website HTML/CSS Review http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-19564 Dave Woods - Freelance Web Designer UK » Queen’s website HTML/CSS Review Thu, 12 Feb 2009 22:15:21 +0000 http://www.dave-woods.co.uk/?p=133#comment-19564 [...] a really basic principle of CSS to understand clearing floated elements in CSS so again is a little bit surprising to see such basic flaws with the Queen’s [...] [...] a really basic principle of CSS to understand clearing floated elements in CSS so again is a little bit surprising to see such basic flaws with the Queen’s [...]

]]> By: Rich http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-1813 Rich Mon, 10 Mar 2008 23:34:40 +0000 http://www.dave-woods.co.uk/?p=133#comment-1813 Hey Dave, Great article, really helped me! Many thanks, Rich Hey Dave,

Great article, really helped me!

Many thanks,

Rich

]]> By: Dave http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-739 Dave Fri, 14 Dec 2007 21:42:45 +0000 http://www.dave-woods.co.uk/?p=133#comment-739 I completely agree. It all comes down to personal preference and as long as it doesn't involve introducing extra markup for the sake of it then it doesn't really matter which solution you decide to use ;) I completely agree. It all comes down to personal preference and as long as it doesn’t involve introducing extra markup for the sake of it then it doesn’t really matter which solution you decide to use ;)

]]> By: Gabi Jguma http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-737 Gabi Jguma Fri, 14 Dec 2007 16:47:46 +0000 http://www.dave-woods.co.uk/?p=133#comment-737 Dave, indeed, that is another way to do it, but, there might be situations where you just can't float the parent(or can't clear the following element), and will have to clear the parent somehow. Obviously, clearfix does the job in such a situation, and overflow doesn't! Dave, indeed, that is another way to do it, but, there might be situations where you just can’t float the parent(or can’t clear the following element), and will have to clear the parent somehow.

Obviously, clearfix does the job in such a situation, and overflow doesn’t!

]]> By: Dave http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-736 Dave Fri, 14 Dec 2007 16:16:47 +0000 http://www.dave-woods.co.uk/?p=133#comment-736 Thanks for the link Gabi, that makes more sense. There's obviously nothing wrong with the way you've done that but an alternative would be to float the parent as well and then just clear the float on the content that follows. Here's an example: http://www.dave-woods.co.uk/wp-content/uploads/2007/12/overflow.html There's lots of different ways of achieving the same thing using CSS though so it's just about selecting the method you prefer. Also, I'm obviously just dealing with the code you provided so I understand that this may not work once the rest of the code has been considered but it is another option. Thanks for your comments :) Thanks for the link Gabi, that makes more sense.

There’s obviously nothing wrong with the way you’ve done that but an alternative would be to float the parent as well and then just clear the float on the content that follows. Here’s an example:

http://www.dave-woods.co.uk/wp-content/uploads/2007/12/overflow.html

There’s lots of different ways of achieving the same thing using CSS though so it’s just about selecting the method you prefer.

Also, I’m obviously just dealing with the code you provided so I understand that this may not work once the rest of the code has been considered but it is another option.

Thanks for your comments :)

]]> By: Gabi Jguma http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-735 Gabi Jguma Fri, 14 Dec 2007 15:41:28 +0000 http://www.dave-woods.co.uk/?p=133#comment-735 Hey Dave, i was actually working at a project that required clearing, and i put together a simple version of the page, to see what i mean. One situation where you would need some element to overflow the containing div, would be a tabbed navigation(like the one in the example below.) You are right that IE6 would frown, but not if you use absolute or relative positioning, and a negative bottom(margin-bottom). http://www.spine.ro/overflow.html Check out the code of the example. It uses clearfix to make the navigation go one pixel below. Save the page...take out the clearfix class applied to the #header div, and add overflow hidden or auto (delete the x in front of teh rule to activate it), and see what you get. Hey Dave, i was actually working at a project that required clearing, and i put together a simple version of the page, to see what i mean.

One situation where you would need some element to overflow the containing div, would be a tabbed navigation(like the one in the example below.)

You are right that IE6 would frown, but not if you use absolute or relative positioning, and a negative bottom(margin-bottom).

http://www.spine.ro/overflow.html

Check out the code of the example.
It uses clearfix to make the navigation go one pixel below.

Save the page…take out the clearfix class applied to the #header div, and add overflow hidden or auto (delete the x in front of teh rule to activate it), and see what you get.

]]> By: Dave http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-733 Dave Fri, 14 Dec 2007 14:23:50 +0000 http://www.dave-woods.co.uk/?p=133#comment-733 Hi Gabi, I'm not sure of a situation where you'd want overflow at the bottom of a div and if you did this it wouldn't be supported by IE6 as the box would simply expand and treat height as min-height instead. A better solution would be to use a negative top margin on the following element to pull it back in if required but I wouldn't have thought this was necessary and would need to see an example of the layout that was trying to be achieved as absolute positioning is usually a better solution when things need to overlap rather than relying on any overflow. Hope that makes sense? Hi Gabi,

I’m not sure of a situation where you’d want overflow at the bottom of a div and if you did this it wouldn’t be supported by IE6 as the box would simply expand and treat height as min-height instead.

A better solution would be to use a negative top margin on the following element to pull it back in if required but I wouldn’t have thought this was necessary and would need to see an example of the layout that was trying to be achieved as absolute positioning is usually a better solution when things need to overlap rather than relying on any overflow.

Hope that makes sense?

]]> By: Gabi Jguma http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-732 Gabi Jguma Fri, 14 Dec 2007 12:51:15 +0000 http://www.dave-woods.co.uk/?p=133#comment-732 Dave, indeed, overflow: hidden; should do the trick, and clear the scrollbars ... but unfortunately, won't resolve the problem of contained elements that actually need to overflow the div (let's say you might need an element that will require to stick 1 px out of the bottom of the cleared div) as they will be trimmed (hidden). Other than that particular situation, i think the technique is safe to use, and is definitely a "lighter", and more semantically correct and intuitive solution than others. Dave, indeed, overflow: hidden; should do the trick, and clear the scrollbars … but unfortunately, won’t resolve the problem of contained elements that actually need to overflow the div (let’s say you might need an element that will require to stick 1 px out of the bottom of the cleared div) as they will be trimmed (hidden).

Other than that particular situation, i think the technique is safe to use, and is definitely a “lighter”, and more semantically correct and intuitive solution than others.

]]> By: Dave http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/comment-page-1/#comment-730 Dave Fri, 14 Dec 2007 12:32:24 +0000 http://www.dave-woods.co.uk/?p=133#comment-730 Scrollbars will only usually appear if you've set a width/height on the container but the floated elements inside this container take up more space. You could also use overflow: hidden; to the same effect but there is probably an underlying reason why the scrollbars are appearing that I'd personally want to fix. Feel free to drop me an email (details in the contact section) with some sample code and I'll be happy to take a look at it for you. Scrollbars will only usually appear if you’ve set a width/height on the container but the floated elements inside this container take up more space.

You could also use overflow: hidden; to the same effect but there is probably an underlying reason why the scrollbars are appearing that I’d personally want to fix.

Feel free to drop me an email (details in the contact section) with some sample code and I’ll be happy to take a look at it for you.

]]>