#17 Images: IMG.align-left & IMG.align-right

Author: Daniell Mesquita

elements.html

@@ -62,9 +62,37 @@ <h6>Heading 6 <span class="badge">Badge</span></h6>
 &lt;h6&gt;Heading 6 &lt;span class="badge"&gt;Badge&lt;/span&gt;&lt;/h6&gt;
 &lt;p&gt;Paragraph &lt;span class="badge mini"&gt;Badge&lt;/span&gt;&lt;/p&gt;</textarea>
 <h1>Images</h1>
+<div class="col_4 column">
 <h4>IMG.Caption</h4>
-<div class="caption"><img class="caption" title="This is the image caption" src="https://placeholdit.imgix.net/~text?txtsize=43&bg=00A185&txtclr=7ECFC1&txt=400x350&w=400&h=350&fm=png" width="400" height="350"><span>This is the image caption</span></div><br/>
+<div class="caption"><img class="caption" title="This is the image caption" src="https://placeholdit.imgix.net/~text?txtsize=43&bg=00A185&txtclr=7ECFC1&txt=400x350&w=400&h=350&fm=png" width="400" height="350"><span>This is the image caption</span></div></div><br/>
 <textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 44px;">&lt;div class="caption"&gt;&lt;img class="caption" title="This is the image caption" src="https://placeholdit.imgix.net/~text?txtsize=43&amp;bg=00A185&amp;txtclr=7ECFC1&amp;txt=400x350&amp;w=400&amp;h=350&amp;fm=png" width="400" height="350"&gt;&lt;span&gt;This is the image caption&lt;/span&gt;&lt;/div&gt;</textarea>
+<div class="col_4 column">
+	<h4>IMG.align-left</h4>
+	<img class="align-left" src="http://placehold.it/100x100/00A185/7ECFC1.png&amp;text=100x100" width="100" height="100">
+	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
+	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
+	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
+	in hendrerit in vulputate velit esse molestie consequat.</p>
+	</div>
+<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 44px;">	&lt;img class="align-left" src="http://placehold.it/100x100/00A185/7ECFC1.png&amp;amp;text=100x100" width="100" height="100"&gt;
+	&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
+	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
+	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
+	in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</textarea>
+
+<div class="col_4 column">
+	<h4>IMG.align-right</h4>
+	<img class="align-right" src="http://placehold.it/100x100/00A185/7ECFC1.png&amp;amp;text=100x100" width="100" height="100">
+	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
+	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
+	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
+	in hendrerit in vulputate velit esse molestie consequat.</p>
+	</div>
+<textarea onclick="this.focus();this.select()" readonly="readonly" style="margin:6px 41px;width: 392px;height: 44px;">	&lt;img class="align-right" src="http://placehold.it/100x100/00A185/7ECFC1.png&amp;amp;amp;text=100x100" width="100" height="100"&gt;
+	&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
+	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
+	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
+	in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</textarea>
 <script type="text/javascript" src="rsc/jquery.min.js"></script>
 </body>
 </html>

rsc/common.css

@@ -16,6 +16,8 @@ h1 .badge{font-size:40px;top:-14px}h2 .badge{font-size:35px;top:-12px}h3 .badge{
 div.caption{border:1px solid #333;padding:3px;max-width:100%;display:inline-block;height:auto}
 div.caption img{display:block;padding:0;margin:0;width:100%;height:auto}
 div.caption span{color:#333;font-size:14px}
+img.align-left, .img-wrap.align-left{float:left;margin:0 10px 5px 0}
+img.align-right, .img-wrap.align-right{float:right;margin:0 0 5px 10px}
 
 .blockquotebtn {
 	background-color: #e7534f;