<?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>Ninja CSS Blog &#187; overflow hidden</title>
	<atom:link href="http://ninjacss.com/blog/tag/overflow-hidden/feed/" rel="self" type="application/rss+xml" />
	<link>http://ninjacss.com/blog</link>
	<description>html, css, javascript &#38; other stuff</description>
	<lastBuildDate>Thu, 25 Aug 2011 14:29:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>CSS &#8211; overflow: hidden; FTW!</title>
		<link>http://ninjacss.com/blog/2009/06/29/css-overflow-hidden-ftw/</link>
		<comments>http://ninjacss.com/blog/2009/06/29/css-overflow-hidden-ftw/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 17:45:00 +0000</pubDate>
		<dc:creator>Cindy</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[overflow hidden]]></category>

		<guid isPermaLink="false">http://ninjacss.com/blog/?p=4</guid>
		<description><![CDATA[The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border. The Solution: Use the style &#8220;overflow: hidden;&#8221; The CSS looked like this: .container { border: 1px solid #cccccc; border-top: none; } So then, I was like: [...]]]></description>
			<content:encoded><![CDATA[<p>The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.</p>
<p>The Solution: Use the style &#8220;overflow: hidden;&#8221;</p>
<p><a href="http://4.bp.blogspot.com/_RxyyoQFlFLw/SkkAQdfvj4I/AAAAAAAAAOY/rQuY9xYEZJA/s1600-h/before.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5352809914902220674" style="display: block; margin: 0px auto 10px; text-align: center; cursor: hand; width: 400px; height: 136px; border: none;" src="http://4.bp.blogspot.com/_RxyyoQFlFLw/SkkAQdfvj4I/AAAAAAAAAOY/rQuY9xYEZJA/s400/before.jpg" border="0" alt="" /></a><br />
The CSS looked like this:</p>
<pre class="brush: css">
.container {
border: 1px solid #cccccc;
border-top: none;
}
</pre>
<p>So then, I was like: SHAZAM! and used &#8220;overflow: hidden;&#8221; and here is the result:</p>
<p><a href="http://2.bp.blogspot.com/_RxyyoQFlFLw/SkkAoKaO8DI/AAAAAAAAAOg/6_txcSI57RE/s1600-h/after.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5352810322095697970" style="display: block; margin: 0px auto 10px; text-align: center; cursor: hand; width: 400px; height: 138px; border: none;" src="http://2.bp.blogspot.com/_RxyyoQFlFLw/SkkAoKaO8DI/AAAAAAAAAOg/6_txcSI57RE/s400/after.jpg" border="0" alt="" /></a><br />
The CSS now looks like this:</p>
<pre class="brush: css">
.container {
border: 1px solid #cccccc;
border-top: none;
overflow: hidden;
}
</pre>
<p>Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try &#8220;overflow: hidden;&#8221; on the container div and it should do the trick!</p>
<p>乾杯!<br />
Cheers!</p>
]]></content:encoded>
			<wfw:commentRss>http://ninjacss.com/blog/2009/06/29/css-overflow-hidden-ftw/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: ninjacss.com @ 2012-05-20 06:53:29 -->
