<?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>Mon, 30 Aug 2010 10:34:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<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[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. Rebecca, our [...]]]></description>
			<content:encoded><![CDATA[<p>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>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center">
<ul class="socials">
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-diigo">
			<a href="http://www.diigo.com/post?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;desc=I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage" rel="nofollow" class="external" title="Post this on Diigo">Post this on Diigo</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;t=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.friendfeed.com/share?title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;link=http://wpgarage.com/css/css-classes-align-images-block-captions/" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
		<li class="shr-gmail">
			<a href="https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;body=Link: http://wpgarage.com/css/css-classes-align-images-block-captions/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a>
		</li>
		<li class="shr-googlebookmarks">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-googlereader">
			<a href="http://www.google.com/reader/link?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;srcUrl=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;srcTitle=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;snippet=I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;summary=I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage&amp;source=WP Garage" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-netvibes">
			<a href="http://www.netvibes.com/share?title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;url=http://wpgarage.com/css/css-classes-align-images-block-captions/" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a>
		</li>
		<li class="shr-posterous">
			<a href="http://posterous.com/share?linkto=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions&amp;selection=I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage" rel="nofollow" class="external" title="Post this to Posterous">Post this to Posterous</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-slashdot">
			<a href="http://slashdot.org/bookmark.pl?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Submit this to SlashDot">Submit this to SlashDot</a>
		</li>
		<li class="shr-sphinn">
			<a href="http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=http://wpgarage.com/css/css-classes-align-images-block-captions/" rel="nofollow" class="external" title="Sphinn this on Sphinn">Sphinn this on Sphinn</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://wpgarage.com/css/css-classes-align-images-block-captions/&amp;title=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-techmeme">
			<a href="http://twitter.com/home/?status=Tip+@Techmeme+http://wpgarage.com/css/css-classes-align-images-block-captions/+&quot;New+CSS+for+aligning+images%2C+block+elements+and+captions&quot;&amp;source=shareaholic" rel="nofollow" class="external" title="Tip this to TechMeme">Tip this to TechMeme</a>
		</li>
		<li class="shr-tumblr">
			<a href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fwpgarage.com%2Fcss%2Fcss-classes-align-images-block-captions%2F&amp;t=New+CSS+for+aligning+images%2C+block+elements+and+captions" rel="nofollow" class="external" title="Share this on Tumblr">Share this on Tumblr</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=New+CSS+for+aligning+images%2C+block+elements+and+captions+-++%28via+%40wpgarage%29&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-mail">
			<a href="mailto:?subject=%22New%20CSS%20for%20aligning%20images%2C%20block%20elements%20and%20captions%22&amp;body=Link: http://wpgarage.com/css/css-classes-align-images-block-captions/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A I%20was%20recently%20working%20on%20a%20WordPress%20site%2C%20and%20I%20just%20couldn%27t%20get%20my%20images%20to%20left-align%20with%20the%20text%20so%20that%20the%20text%20would%20wrap%20around%20it.%20It%20was%20wrapping%20in%20the%20text%20editor%20in%20the%20admin%2C%20but%20on%20the%20front%20end%20the%20image%20stuck%20out%20of%20the%20top%20of%20the%20text.%0D%0A%0D%0ARebecca%2C%20our%20genius%20Web%20Project%20Manage" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a>
		</li>
		<li class="shr-printfriendly">
			<a href="http://www.printfriendly.com/print?url=http://wpgarage.com/css/css-classes-align-images-block-captions/" rel="nofollow" class="external" title="Send this page to Print Friendly">Send this page to Print Friendly</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></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>
