Databases
StackOverflow2013
Postsdbo
POGenerating a CSS grid layout using DIV issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGenerating a CSS grid layout using DIV issue
    text
    copied!<p>I was hoping someone could point out what I am doing wrong with my CSS/HTML. </p> <p>I’m rolling my own personal Google/ig replacement, so you know what I am going for. </p> <p>The boxes shouldn’t have that giant space in between the rows. I was hopping all the boxes would just line up with each other like the do on the last column on the right.</p> <p>Forgive me, CSS isn't my forte. If I am going about this all wrong, please by all means, school me. I am here to learn.</p> <p>Any help?</p> <p><strong>This is what I get</strong> <img src="https://i.stack.imgur.com/lSvES.png" alt="What I get"></p> <p><strong>And with the magic of photoshop, this is what I want to happen.</strong></p> <p><img src="https://i.stack.imgur.com/aEiPz.png" alt="enter image description here"></p> <p><strong>Running the Web Developer Div Size Tool, I get this:</strong> <img src="https://i.stack.imgur.com/9g6yb.png" alt="enter image description here"></p> <p><strong>Relevant HTML</strong></p> <p>Each <code>widget-container</code> is repeated for each site. Then the <code>li</code> is looped to generate the <code>ul</code></p> <pre><code>&lt;div id="content"&gt; &lt;--! Begin repeated content → &lt;div id="widget-container"&gt; &lt;div id="widget-head"&gt; &lt;h3&gt;&lt;a href="#" target="_blank"&gt;FEED TITLE&lt;/a&gt;&lt;/h3&gt; &lt;div id="widget-edit"&gt;EditButton&lt;/div&gt; &lt;/div&gt; &lt;div id="widget-content"&gt; &lt;ul id="widget-feeds"&gt; &lt;li&gt; &lt;a href="#" onclick=""&gt; &lt;img src="images/icons/hidden.gif"&gt; &lt;/a&gt; &lt;a href="#" target="_blank" title="" &gt;Feed Link&lt;/a&gt; &lt;div class="widget-desc"&gt; Content Here &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" onclick=""&gt; &lt;img src="images/icons/hidden.gif"&gt; &lt;/a&gt; &lt;a href="#" target="_blank" title="" &gt;Feed Link&lt;/a&gt; &lt;div class="widget-desc"&gt; Content Here &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" onclick=""&gt; &lt;img src="images/icons/hidden.gif"&gt; &lt;/a&gt; &lt;a href="#" target="_blank" title="" &gt;Feed Link&lt;/a&gt; &lt;div class="widget-desc"&gt; Content Here &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="fclear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>And the relevant CSS document</strong></p> <pre><code>@charset "UTF-8"; /* CSS Document */ /* Reset */ body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;} /* End Reset */ body { font-size: 0.8em; font-family: Arial,Verdana,Sans-Serif; background-color: #FFF; } a { color: #36C; } .hidden { display: none; } .fclear {clear:both} #content #widget-container { width: 30%; background-color: #ddd; float: left; margin-top: 25px; margin-bottom: 25px; margin-left: 25px; white-space: nowrap; display: block; } #content #widget-container #widget-head { height: 25px; padding: 5px; overflow: hidden; line-height: 25px; } #content #widget-container #widget-head h3 { font-size: 14px; width: 90%; float: left; } #content #widget-container #widget-head #widget-edit { float: right; width: 12px; padding-top: 5px; } #content #widget-container #widget-content { background-color: #FFF; margin: 1px; } #content #widget-container #widget-content #widget-feeds { } #content #widget-container #widget-content #widget-feeds ul { overflow: auto; } #content #widget-container #widget-content #widget-feeds li { display: block; white-space: normal; word-wrap: normal; margin-bottom: 0 !important; padding: 4px 0 9px 0 !important; } #content #widget-container #widget-content #widget-feeds li a { } #content #widget-container #widget-content #widget-feeds li .widget-desc { white-space: normal; display: none; margin-bottom: 4px; padding-top: 2px; padding-right: 10px; padding-bottom: 5px; padding-left: 15px; overflow: hidden; } </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