Databases
StackOverflow2013
Postsdbo
POEdit CSS to eliminate margin on end of column
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEdit CSS to eliminate margin on end of column
    text
    copied!<p>I have a display container with a flexible width which contains <code>li</code> items that float left. There are margins set so the <code>li</code> elements form a grid.</p> <p><strong>Question</strong>: How can I set the last <code>li</code> on the right to have <code>margin-right:0</code> so that the grid can be lined up perfectly against the back drop?</p> <p><img src="https://i.stack.imgur.com/LCL4O.jpg" alt="enter image description here"></p> <p>I have a <a href="http://jsfiddle.net/nalagg/g9H2u/" rel="nofollow noreferrer">JSFiddle</a>, and my code right now is as follows:</p> <p><em>CSS</em>:</p> <pre><code>html, body{margin:0; padding:0; } .topNav { left:0; right:0; position:absolute; top:0px; margin:0 30px 0 30px; text-align:center; height:100px; background-color:grey; } .content { margin:130px 30px 0 30px; padding:0; background-color:#999; display:block; float:left; } .content li{ width:180px; height:280px; background-color:#333; float:left; list-style:none; /* margin:0 0 20px 20px; */ margin:0 20px 20px 0; } .last{clear:both; width:10px; height:10px; background-color:#999;} </code></pre> <p><em>HTML</em>:</p> <pre><code>&lt;div class="topNav"&gt; &lt;/div&gt; &lt;ul class='content'&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;div class='last'&gt;&lt;/div&gt; &lt;/ul&gt; </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