<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Marcel Scherf &#187; clearfix</title>
	<atom:link href="http://www.marcelscherf.com/tag/clearfix/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.marcelscherf.com</link>
	<description>webdesign &#38; development</description>
	<lastBuildDate>Wed, 13 Apr 2011 14:09:44 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Clear a floating element without additional markup</title>
		<link>http://www.marcelscherf.com/2008/07/clear-a-floating-element-without-additional-markup/</link>
		<comments>http://www.marcelscherf.com/2008/07/clear-a-floating-element-without-additional-markup/#comments</comments>
		<pubDate>Fri, 04 Jul 2008 04:04:46 +0000</pubDate>
		<dc:creator>Marcel Scherf</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[clear]]></category>
		<category><![CDATA[clear:both]]></category>
		<category><![CDATA[clearfix]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css-hack]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://marcelscherf.wordpress.com/?p=25</guid>
		<description><![CDATA[Found at: Position is everything
Normally you would add an element like this:

&#60;div style="clear:both"&#62;&#38;nbsp;&#60;/div&#62;

after your floating elements to clear them. With this method you don&#8217;t need to do this anymore.
Just add this to your stylesheet:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
 [...]]]></description>
			<content:encoded><![CDATA[<p>Found at: <a href="http://www.positioniseverything.net/easyclearing.html">Position is everything</a></p>
<p>Normally you would add an element like this:</p>
<blockquote>
<pre>&lt;div style="clear:both"&gt;&amp;nbsp;&lt;/div&gt;</pre>
</blockquote>
<p>after your floating elements to clear them. With this method you don&#8217;t need to do this anymore.</p>
<p>Just add this to your stylesheet:</p>
<blockquote>
<pre>.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

<span class="red;">.clearfix {display: inline-block;}</span>

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
<span>.clearfix {display: block;}</span>
/* End hide from IE-mac */</pre>
</blockquote>
<p>and also add the &#8220;clearfix&#8221; class to the element that wraps your floating element. That&#8217;s it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.marcelscherf.com/2008/07/clear-a-floating-element-without-additional-markup/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

