Column Layout With inline-block (16th February 2012)

Each year fills one column on my archive of all blog entries. It used to be a 4-column percentage layout using float. Now it uses inline-block so the number of columns adapts to the available area. This way even takes slightly less HTML, CSS and back-end code!

New inline-block Technique

The relevant HTML: 

<div><h2>2003</h2>…</div>
<div><h2>2004</h2>…</div>
<div><h2>2005</h2>…</div>
<div><h2>2006</h2>…</div>
<div><h2>2007</h2>…</div>
<div><h2>2008</h2>…</div>
<div><h2>2009</h2>…</div>
<div><h2>2010</h2>…</div>
<div><h2>2011</h2>…</div>
<div><h2>2012</h2>…</div>

Relevant CSS: 

/* - All Entries Archive */
.entries #content div {
 display: inline-block;
 padding: 0.5em 0 0 0; /* 6px */
 min-width: 8em;
 max-width: 17em; /* 1024 = 4 columns; 1280 = 5 columns */
 overflow: hidden;
 vertical-align: top;
 border-top: 2px solid #336666;
}
.entries #content ol {
 padding: 0 0 0 2.5em;
}

Relevant VB6: 

'Wrap to a new row every 4 years:
If (Not yyyy) And (yyyy Mod 4 = 3) Then '2007, 2011
    sEntries.WriteLine DIV_CLEAR 'new row
Else
    sEntries.WriteLine DIV
End If

Previous float Technique

HTML, compacted and truncated as a summary: 

<div><h2>2003</h2>…</div>
<div><h2>2004</h2>…</div>
<div><h2>2005</h2>…</div>
<div><h2>2006</h2>…</div>
<div class="clear"><h2>2007</h2>…</div>
<div><h2>2008</h2>…</div>
<div><h2>2009</h2>…</div>
<div><h2>2010</h2>…</div>
<div class="clear"><h2>2011</h2>…</div>
<div><h2>2012</h2>…</div>

Relevant CSS: 

/* - All Entries Archive */
.entries #content div {
 float: left;
 width: 24.8%; /* IE6 & IE7 rounding */
 min-width: 8em;
 padding-right: 0;
 overflow: hidden;
}
.entries #content div.first {
 padding-left: 0;
}
.entries #content div.clear {
 clear: left; /* IE6 & IE7 forget this for subsequent columns */
}
.entries #content ol {
 padding: 0 0 0 2.5em;
}

Relevant VB6: 

sEntries.WriteLine DIV
  1. Laptop!
  2. Received It!
  3. File Transfers with USB Stick
  4. Full Administrator Account!
  5. Installing Firefox
  6. Installing Games
  7. Reducing Processes
  8. WiFi Gaming
  9. E-mail
  10. Backups, Old & New
  11. Desk Arrangements
  12. Migrating Music
  13. Mobile Phone Archive
  14. Web Developer Setup
  15. Printing
  16. Putting Old PC Out To Pasture
  17. Stopping the Magical Edges
  18. Disk Cleanup
  19. FTPuse Integrates Seamlessly
  20. Laptop Performance