Databases
StackOverflow2013
Postsdbo
POCSS Four Column width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Four Column width
    text
    copied!<p><a href="http://jsfiddle.net/YDLAJ/1/" rel="nofollow">http://jsfiddle.net/YDLAJ/1/</a></p> <p>Im having trouble with getting my list items to not overlap. My container width is 980px and the four columns line up correctly in the Jsfiddle example above but not on my site. </p> <p><a href="http://www.guytgunterappliances.com/manufacturers/" rel="nofollow">http://www.guytgunterappliances.com/manufacturers/</a></p> <p>Here is the Html</p> <pre><code>&lt;div style="width: 980px;"&gt; &lt;a href="http://www.guytgunterappliances.com/subzero-atlanta/"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7353/10673034144_62c4da477b_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/thermador-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7353/10673023936_5454b7b056_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/miele-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5524/10672964305_b80a36b1e0_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/kitchenaid-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7400/10673024026_d1c2e8a43a_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/bosch-atlanta/"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7396/10673034164_960a6e8e6d_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/bluestar-ranges-atlanta-2/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7293/10673023696_5f941a8f60_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/ge-appliances-atlanta-2/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5490/10672964455_527d7519bf_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/wolf-atlanta-ranges/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2873/10673023806_2452893531_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/asko-atlanta-appliances/"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm6.staticflickr.com/5491/10672964445_88a6263b8d_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/danver-cabinets-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7440/10673034704_a8f7dcd07a_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/elkay-sinks-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2860/10673024176_e2c6db268b_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/frigidaire-atlanta-appliances/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7419/10672964565_b3d8d01416_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/grohe"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7327/10672964625_f7464e1018_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/hoshizaki-ice-machines-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7411/10673024476_6422e33650_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/lynx-grill-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2865/10672964775_fed833543c_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/rohl-faucets-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2818/10672964805_6f7374f1be_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/scotsman-ice-machines-atlanta/"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm4.staticflickr.com/3712/10672964895_6c5b430d7f_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/toto-toilets-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5480/10673023746_61fcea38de_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/u-line-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7403/10673034434_b80a36b1e0_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/vent-a-hood-hoods-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2868/10673035064_29eb85aee6_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/viking-range-atlanta/"&gt;&lt;img id="img-4-grid-1" alt="" src="http://farm4.staticflickr.com/3735/10673244223_88cda72243_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/whirlpool-appliances-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5544/10673035264_8e5fa564a1_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/zephyr-range-hood-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5513/10673025016_a08233e22d_o.jpg" /&gt;&lt;/a&gt; &lt;a href="http://www.guytgunterappliances.com/grill-dome-grills-atlanta/"&gt;&lt;img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2827/10673244513_07296f01a5_o.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Here is the CSS</p> <pre><code>#img-4-grid-1 { width:237px; padding-bottom:10px; float:left; } #img-4-grid { padding:0px 0px 10px 10px; width:237px; float: left; } </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