Databases
StackOverflow2013
Postsdbo
POCentre figures within div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentre figures within div
    text
    copied!<p>I'm trying to centre some figures. At the moment the figure's are in two columns, I would like them within three. But every time I attempt to increase the width all the figures go funny, or move slightly to the left. Any help would be kindly appreciated. Visual aid as follows: <a href="http://jsfiddle.net/QcLLC/" rel="nofollow">http://jsfiddle.net/QcLLC/</a></p> <p>HTML:</p> <pre><code> &lt;section class="main"&gt; &lt;div class="grid clearfix masonry" id="grid" style="position: relative; height: 1820px;"&gt; &lt;figure style="position: absolute; top: 0px; left: 0px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/4.jpg"&gt;&lt;figcaption style="position: absolute; width: 100%;"&gt;&lt;a href="http://drbl.in/fWMT"&gt;Fall 7 Times Stand Up 8&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 0px; left: 416.34375px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/7.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fLBG"&gt;Unashamed Optimism of Ambition&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 260px; left: 416.34375px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/1.jpg"&gt;&lt;figcaption style="position: absolute; width: 100%;"&gt;&lt;a href="http://drbl.in/fWMM"&gt;Stay Hungry. Stay Foolish.&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 650px; left: 0px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/3.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fWPV"&gt;Wild Hearts Cannot Be Tamed&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 910px; left: 0px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/5.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fGhI"&gt;2012 Detroit Tigers&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 910px; left: 416.34375px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/6.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fKCf"&gt;Bad Hair Day&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 1170px; left: 0px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/2.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fQdt"&gt;Work Hard. Stay Humble.&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 1170px; left: 416.34375px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/8.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fPEY"&gt;Everyone Deserves To Be Adored&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;figure style="position: absolute; top: 1430px; left: 0px;" class="masonry-brick"&gt;&lt;img src="http://tympanus.net/Development/StickyCaptionsConcept/images/9.jpg"&gt;&lt;figcaption&gt;&lt;a href="http://drbl.in/fWwG"&gt;Sarah William's Quote&lt;/a&gt; by Erika Mackley&lt;/figcaption&gt;&lt;/figure&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt;&lt;!-- /container --&gt; </code></pre> <p></p> <p></p> <p>CSS:</p> <pre><code> .grid { margin: 30px auto; } .grid figure { display: block; float: left; margin: 0 1% 10px 1%; cursor: pointer; overflow: hidden; } .grid figure img { display: block; } .grid figure figcaption { position: absolute; font-size: 16px; font-weight: 400; left: auto; width: 100%; height: 60px; bottom: -60px; padding: 20px; color: #ddd; background: #18bcbc; -webkit-font-smoothing: antialiased; -webkit-transition: bottom 0.2s ease; -moz-transition: bottom 0.2s ease-in-out; -ms-transition: bottom 0.2s ease-in-out; -o-transition: bottom 0.2s ease-in-out; transition: bottom 0.2s ease-in-out; } .grid figure figcaption a { color: #fff; } .grid figure figcaption a:hover { color: #ffd468; } .grid figure:hover figcaption { bottom: 0px; } html { height: 100%; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { background: #ffe19a url(../images/noisebg.png); font-weight: 300; font-size: 14px; color: #333; overflow: scroll; overflow-x: hidden; } a { color: #555; text-decoration: none; } .container { width: 100%; position: relative; } .main, .container { width: 100%; max-width: 1275px; margin: 0 auto; position: relative; padding: 0 0 5px 0px } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload