{"id":2009,"date":"2009-08-10T11:00:03","date_gmt":"2009-08-10T10:00:03","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=232"},"modified":"2009-08-10T11:00:03","modified_gmt":"2009-08-10T10:00:03","slug":"clearing-floats-with-pure-css","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/08\/clearing-floats-with-pure-css\/","title":{"rendered":"Clearing floats with pure CSS"},"content":{"rendered":"<p>Do you ever use <code>&lt;br style='clear:both' \/&gt;<\/code> or <code>&lt;div style='clear:both'&gt;&lt;\/div&gt;<\/code> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:<\/p>\n<h4>Bad:<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div style=&quot;float:left;width:300px&quot;&gt;left text block&lt;\/div&gt;\n&lt;div style=&quot;float:right;width:300px&quot;&gt;right text block&lt;br&gt; (which takes more vertical space than the left)&lt;\/div&gt;\n&lt;br style='clear:both' \/&gt;\nText that you need to appear below the previous text blocks\n<\/pre>\n<p>Why is it bad?<\/p>\n<ul>\n<li><code>&lt;br style='clear:both' \/&gt;<\/code> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don&#8217;t necessarily want it. It is using a HTML element for more than it&#8217;s specific purpose.<\/li>\n<li><code>&lt;div style='clear:both'&gt;&lt;\/div&gt;<\/code> is bad because you shouldn&#8217;t <a href=\"http:\/\/webdosanddonts.com\/dont-use-empty-html-elements\">use empty HTML elements<\/a>.<\/li>\n<\/ul>\n<h4>Better:<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class='clearAfter'&gt;\n    &lt;div style=&quot;float:left;width:300px&quot;&gt;left text block&lt;\/div&gt;\n    &lt;div style=&quot;float:right;width:300px&quot;&gt;right text block&lt;br&gt;which takes more vertical space than the left&lt;\/div&gt;\n&lt;\/div&gt;\nText that you need to appear below the previous text blocks\n<\/pre>\n<p>where the <em>clearAfter<\/em> css class is defined by:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.clearAfter:after {\nclear: both;\ncontent: &quot;.&quot;;\ndisplay: block;\nheight: 0;\nvisibility: hidden\n}\n.clearAfter {zoom:1}   \/*IE necessary workaround*\/\n<\/pre>\n<p>I got this trick from the <a href=\"http:\/\/developer.yahoo.com\/yui\/grids\/\">Yahoo! grids CSS framework<\/a> &#8211; so it is a rock solid enterprise tested technique: &#8220;<em>No matter which column is longer, the footer stays at the bottom<\/em>&#8220;. Also, see <a href=\"http:\/\/snipplr.com\/view\/86\/clear-floats-without-structural-markup\/\">http:\/\/snipplr.com\/view\/86\/clear-floats-without-structural-markup\/<\/a><\/p>\n<p>What is the <code>zoom:1<\/code> for? This is a hack needed for IE to force the element to be given a position component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you ever use &lt;br style=&#8217;clear:both&#8217; \/&gt; or &lt;div style=&#8217;clear:both&#8217;&gt;&lt;\/div&gt; in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections: Bad: &lt;div style=&quot;float:left;width:300px&quot;&gt;left text block&lt;\/div&gt; &lt;div style=&quot;float:right;width:300px&quot;&gt;right text block&lt;br&gt; (which takes more vertical space than the left)&lt;\/div&gt; &lt;br style=&#8217;clear:both&#8217; \/&gt; [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[82],"tags":[85,86],"class_list":["post-2009","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-css","tag-html"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2009"}],"version-history":[{"count":0,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}