Databases
StackOverflow2013
Postsdbo
POHow to create an IE6 compatible grid layout from an unordered list?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create an IE6 compatible grid layout from an unordered list?
    text
    copied!<p>I want to style an HTML unordered list to look like a grid. The desired result is something like this:</p> <p><a href="http://georgebrock.com/misc/css-grid/firefox.png" rel="nofollow noreferrer">Grid as rendnered by Firefox http://georgebrock.com/misc/css-grid/firefox.png</a></p> <p>I have the following HTML:</p> <pre><code>&lt;ul class="grid"&gt; &lt;li&gt;First item. This is sometimes longer than the second item.&lt;/li&gt; &lt;li&gt;2nd item&lt;/li&gt; &lt;li class="reset"&gt;Third item&lt;/li&gt; &lt;li&gt;Fourth item&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Styled by the following CSS:</p> <pre><code>ul.grid { /* Remove standard browser list styles */ list-style:none; margin:0; padding:0; /* Add specific styles */ width:13.5em; /* Clear internal floats (IE) */ overflow:hidden; /* Clear internal floats (proper browsers) */ background-color:#f00; border-bottom:0.5em solid #f00; } ul.grid li { display:inline; /* IE6 double margin float bug fix */ width:5em; float:left; padding:0.5em; margin-left:0.5em; border-top:0.5em solid #f00; padding-bottom:1000.5em; /* } Balance height of items */ margin-bottom:-1000em; /* } */ background-color:#fff; } ul.grid li.reset { clear:left; } </code></pre> <p>In Firefox, Safari etc. this renders as required. In IE 6 however the clearing does not effect subsequent elements in the same way:</p> <p><a href="http://georgebrock.com/misc/css-grid/ie6.png" rel="nofollow noreferrer">Grid as rendnered by Internet Explorer 6 http://georgebrock.com/misc/css-grid/ie6.png</a></p> <p>You can see live example code here: <a href="http://georgebrock.com/misc/css-grid/" rel="nofollow noreferrer">http://georgebrock.com/misc/css-grid/</a></p> <p>Any ideas?</p>
 

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