<?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>WP Garage &#187; CSS</title>
	<atom:link href="http://wpgarage.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://wpgarage.com</link>
	<description>wordpress tricks, hacks, and tips</description>
	<lastBuildDate>Wed, 03 Mar 2010 14:47:51 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>New CSS for aligning images, block elements and captions</title>
		<link>http://wpgarage.com/css/css-classes-align-images-block-captions/</link>
		<comments>http://wpgarage.com/css/css-classes-align-images-block-captions/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 09:19:52 +0000</pubDate>
		<dc:creator>Miriam Schwab</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[captions]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[upgrades]]></category>

		<guid isPermaLink="false">http://wordpressgarage.com/?p=340</guid>
		<description><![CDATA[<p class="dropcap-first">I was recently working on a WordPress site, and I just couldn&#8217;t get my images to left-align with the text so that the text would wrap around it. It was wrapping in the text editor in the admin, but on the front end the image stuck out of the ...]]></description>
			<content:encoded><![CDATA[<p class="dropcap-first">I was recently working on a WordPress site, and I just couldn&#8217;t get my images to left-align with the text so that the text would wrap around it. It was wrapping in the text editor in the admin, but on the front end the image stuck out of the top of the text.</p>
<p>Rebecca, our genius Web Project Manager at <a title="illuminea marketing &amp; media" href="http://illuminea.com">illuminea</a>, did a search and discovered on the <a title="CSS on the WordPress Codex" href="http://codex.wordpress.org/CSS">WordPress Codex</a> that a bunch of new styles are needed in your style.php file in order to get the images to do what you want from WordPress version 2.5 and up. If you are using an older theme, you may not have these styles in your style sheet. The same classes are used to align images that have a caption (as of WordPress 2.6).</p>
<p>Here are the styles &#8211; you can just copy and paste them into your style.css file or wherever your CSS styles are located:</p>
<pre>.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
</pre>

<span class="slashdigglicious">
<a href="http://slashdot.org/bookmark.pl?url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Slashdot It!"><img src="http://slashdot.org/favicon.ico" height="16" width="16" alt="[Slashdot]" /></a>
<a href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Digg This Story"><img src="http://digg.com/favicon.ico" width="16" height="16" alt="[Digg]" /></a>
<a href="http://reddit.com/submit?url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Reddit"><img src="http://reddit.com/favicon.ico" width="16" height="16" alt="[Reddit]" /></a>
<a href="http://del.icio.us/post?url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Save to del.icio.us" onclick="window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions', 'delicious', 'toolbar=no,width=700,height=400'); return false;"><img src="http://images.del.icio.us/static/img/delicious.small.gif" width="16" height="16" alt="[del.icio.us]" /></a>
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F" title="Share on Facebook"><img src="http://www.facebook.com/favicon.ico" width="16" height="16" alt="[Facebook]" /></a>
<a href="http://technorati.com/faves?add=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F" title="Add to my Technorati Favorites"><img src="http://technorati.com/favicon.ico" width="16" height="16" alt="[Technorati]" /></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Save to Google Bookmarks"><img src="http://www.google.com/favicon.ico" width="16" height="16" alt="[Google]" /></a>
<a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" title="Stumble it!"><img src="http://www.stumbleupon.com/favicon.ico" width="16" height="16" alt="[StumbleUpon]" /></a>
</span>]]></content:encoded>
			<wfw:commentRss>http://wpgarage.com/css/css-classes-align-images-block-captions/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>
