Skip to content

Instantly share code, notes, and snippets.

@anselmh

anselmh/dabblet.html

Created March 18, 2012 11:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anselmh/2070569 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anselmh/2070569 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="ym-wrapper">
<div class="ym-wbox ym-clearfix">
<h1>flexible fluid &lt;figure&gt;</h1>
<figure class="float-left">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: inline</h2>
<p>This &lt;figure&gt; element is <em>display:inline</em> and floating left.</p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-right table">
<img src="http://farm1.staticflickr.com/231/463596797_23cc2ad8c8.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: table</h2>
<p>This &lt;figure&gt; element is <em>display:table</em> and floating right.</p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>&lt;figcaption&gt; is not wider as the image</li>
</ul>
<h4>Contra</h4>
<ul>
<li>image is not scalable</li>
<li>max-width for &lt;figure&gt; doesn't work</li>
<li>image, &lt;figure&gt; and &lt;figcaption&gt; are always at the original image width</li>
<li>by the way a fixed width like <em>width:50%</em> doesn't work for display:table</li>
</ul>
<hr />
<figure class="float-left block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: block</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-left inline-block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: inline-block</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-left block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
</figure>
<h2>display: block (without caption)</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>no caption</li>
</ul>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment