Improved styling of the threeboxes layout

It's still not perfect, though:
- New version is table-based - meh.
- Uses negative margins more than once - meh!
- Only works if any of the columns has enough content to wrap. If all
  content fits in the columns without wrapping, the total table width
  falls back to the "min-width: 100%" statement - which, with the
  negative margins, isn't really 100%. MEH!

Still... it looks better than the previous solution.

So far tested on FF3.5, Opera 9.something, and some semi-recent version
of webkit. Reported to work fine on IE7 as well.

2 files changed, 150 insertions, 137 deletions

diff --git a/lib/VNDB/Handler/Misc.pm b/lib/VNDB/Handler/Misc.pm
index ceae11ce..8cbe2ed9 100644
--- a/lib/VNDB/Handler/Misc.pm
+++ b/lib/VNDB/Handler/Misc.pm
@@ -65,104 +65,112 @@ sub homepage {
    end;
   end;
 
-  # Recent changes
-  div class => 'mainbox threelayout';
-   h1 'Recent changes';
-   my $changes = $self->dbRevisionGet(what => 'item user', results => 10, auto => 1, hidden => 1);
-   ul;
-    for (@$changes) {
-      my $t = (qw|v r p|)[$_->{type}];
-      li;
-       b "$t:";
-       a href => "/$t$_->{iid}.$_->{rev}", title => $_->{ioriginal}||$_->{ititle}, shorten $_->{ititle}, 30;
-       txt ' by ';
-       a href => "/u$_->{requester}", $_->{username};
-      end;
-    }
-   end;
-  end;
-
-  # Announcements
-  div class => 'mainbox threelayout';
-   my $an = $self->dbThreadGet(type => 'an', order => 't.id DESC', results => 2);
-   a class => 'right', href => '/t/an', 'News archive';
-   h1 'Announcements';
-   for (@$an) {
-     my $post = $self->dbPostGet(tid => $_->{id}, num => 1)->[0];
-     h2;
-      a href => "/t$_->{id}", $_->{title};
+  table class => 'mainbox threelayout';
+   Tr;
+
+    # Recent changes
+    td;
+     h1 'Recent changes';
+     my $changes = $self->dbRevisionGet(what => 'item user', results => 10, auto => 1, hidden => 1);
+     ul;
+      for (@$changes) {
+        my $t = (qw|v r p|)[$_->{type}];
+        li;
+         b "$t:";
+         a href => "/$t$_->{iid}.$_->{rev}", title => $_->{ioriginal}||$_->{ititle}, shorten $_->{ititle}, 30;
+         txt ' by ';
+         a href => "/u$_->{requester}", $_->{username};
+        end;
+      }
      end;
-     p;
-      lit bb2html $post->{msg}, 150;
+    end;
+
+    # Announcements
+    td;
+     my $an = $self->dbThreadGet(type => 'an', order => 't.id DESC', results => 2);
+     a class => 'right', href => '/t/an', 'News archive';
+     h1 'Announcements';
+     for (@$an) {
+       my $post = $self->dbPostGet(tid => $_->{id}, num => 1)->[0];
+       h2;
+        a href => "/t$_->{id}", $_->{title};
+       end;
+       p;
+        lit bb2html $post->{msg}, 150;
+       end;
+     }
+    end;
+
+    # Recent posts
+    td;
+     h1 'Recent posts';
+     my $posts = $self->dbThreadGet(what => 'lastpost boardtitles', results => 10, order => 'tpl.date DESC', notusers => 1);
+     ul;
+      for (@$posts) {
+        my $boards = join ', ', map $self->{discussion_boards}{$_->{type}}.($_->{iid}?' > '.$_->{title}:''), @{$_->{boards}};
+        li;
+         txt age($_->{ldate}).' ';
+         a href => "/t$_->{id}.$_->{count}", title => "Posted in $boards", shorten $_->{title}, 20;
+         txt ' by ';
+         a href => "/u$_->{luid}", $_->{lusername};
+        end;
+      }
      end;
-   }
-  end;
+    end;
 
-  # Recent posts
-  div class => 'mainbox threelayout last';
-   h1 'Recent posts';
-   my $posts = $self->dbThreadGet(what => 'lastpost boardtitles', results => 10, order => 'tpl.date DESC', notusers => 1);
-   ul;
-    for (@$posts) {
-      my $boards = join ', ', map $self->{discussion_boards}{$_->{type}}.($_->{iid}?' > '.$_->{title}:''), @{$_->{boards}};
-      li;
-       txt age($_->{ldate}).' ';
-       a href => "/t$_->{id}.$_->{count}", title => "Posted in $boards", shorten $_->{title}, 20;
-       txt ' by ';
-       a href => "/u$_->{luid}", $_->{lusername};
-      end;
-    }
    end;
-  end;
+   Tr;
+
+    # Random visual novels
+    td;
+     h1 'Random visual novels';
+     my $random = $self->dbVNGet(results => 10, order => 'RANDOM()');
+     ul;
+      for (@$random) {
+        li;
+         a href => "/v$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 40;
+        end;
+      }
+     end;
+    end;
 
-  # Random visual novels
-  div class => 'mainbox threelayout';
-   h1 'Random visual novels';
-   my $random = $self->dbVNGet(results => 10, order => 'RANDOM()');
-   ul;
-    for (@$random) {
-      li;
-       a href => "/v$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 40;
-      end;
-    }
-   end;
-  end;
+    # Upcoming releases
+    td;
+     h1 'Upcoming releases';
+     my $upcoming = $self->dbReleaseGet(results => 10, unreleased => 1, what => 'platforms');
+     ul;
+      for (@$upcoming) {
+        li;
+         lit datestr $_->{released};
+         txt ' ';
+         cssicon $_, $self->{platforms}{$_} for (@{$_->{platforms}});
+         txt ' ';
+         a href => "/r$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 30;
+        end;
+      }
+     end;
+    end;
 
-  # Upcoming releases
-  div class => 'mainbox threelayout';
-   h1 'Upcoming releases';
-   my $upcoming = $self->dbReleaseGet(results => 10, unreleased => 1, what => 'platforms');
-   ul;
-    for (@$upcoming) {
-      li;
-       lit datestr $_->{released};
-       txt ' ';
-       cssicon $_, $self->{platforms}{$_} for (@{$_->{platforms}});
-       txt ' ';
-       a href => "/r$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 30;
-      end;
-    }
-   end;
-  end;
+    # Just released
+    td;
+     h1 'Just released';
+     my $justrel = $self->dbReleaseGet(results => 10, order => 'rr.released DESC', unreleased => 0, what => 'platforms');
+     ul;
+      for (@$justrel) {
+        li;
+         lit datestr $_->{released};
+         txt ' ';
+         cssicon $_, $self->{platforms}{$_} for (@{$_->{platforms}});
+         txt ' ';
+         a href => "/r$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 30;
+        end;
+      }
+     end;
+    end;
 
-  # Just released
-  div class => 'mainbox threelayout last';
-   h1 'Just released';
-   my $justrel = $self->dbReleaseGet(results => 10, order => 'rr.released DESC', unreleased => 0, what => 'platforms');
-   ul;
-    for (@$justrel) {
-      li;
-       lit datestr $_->{released};
-       txt ' ';
-       cssicon $_, $self->{platforms}{$_} for (@{$_->{platforms}});
-       txt ' ';
-       a href => "/r$_->{id}", title => $_->{original}||$_->{title}, shorten $_->{title}, 30;
-      end;
-    }
-   end;
-  end;
+   end; # /tr
+  end; # /table
 
-  clearfloat;
   $self->htmlFooter;
 }
 
diff --git a/lib/VNDB/Handler/Tags.pm b/lib/VNDB/Handler/Tags.pm
index 8f0e1486..eefede3c 100644
--- a/lib/VNDB/Handler/Tags.pm
+++ b/lib/VNDB/Handler/Tags.pm
@@ -596,58 +596,63 @@ sub tagindex {
   my $t = $self->dbTagTree(0, 2, 1);
   _childtags($self, {childs => $t}, 1);
 
-  # Recently added
-  div class => 'mainbox threelayout';
-   a class => 'right', href => '/g/list', 'Browse all tags';
-   my $r = $self->dbTagGet(order => 'added DESC', results => 10, state => 2);
-   h1 'Recently added';
-   ul;
-    for (@$r) {
-      li;
-       txt age $_->{added};
-       txt ' ';
-       a href => "/g$_->{id}", $_->{name};
-      end;
-    }
-   end;
-  end;
+  table class => 'mainbox threelayout';
+   Tr;
+
+    # Recently added
+    td;
+     a class => 'right', href => '/g/list', 'Browse all tags';
+     my $r = $self->dbTagGet(order => 'added DESC', results => 10, state => 2);
+     h1 'Recently added';
+     ul;
+      for (@$r) {
+        li;
+         txt age $_->{added};
+         txt ' ';
+         a href => "/g$_->{id}", $_->{name};
+        end;
+      }
+     end;
+    end;
 
-  # Popular
-  div class => 'mainbox threelayout';
-   $r = $self->dbTagGet(order => 'c_vns DESC', meta => 0, results => 10);
-   h1 'Popular tags';
-   ul;
-    for (@$r) {
-      li;
-       a href => "/g$_->{id}", $_->{name};
-       txt " ($_->{c_vns})";
-      end;
-    }
-   end;
-  end;
+    # Popular
+    td;
+     $r = $self->dbTagGet(order => 'c_vns DESC', meta => 0, results => 10);
+     h1 'Popular tags';
+     ul;
+      for (@$r) {
+        li;
+         a href => "/g$_->{id}", $_->{name};
+         txt " ($_->{c_vns})";
+        end;
+      }
+     end;
+    end;
 
-  # Moderation queue
-  div class => 'mainbox threelayout last';
-   h1 'Awaiting moderation';
-   $r = $self->dbTagGet(state => 0, order => 'added DESC', results => 10);
-   ul;
-    li "Moderation queue empty! yay!" if !@$r;
-    for (@$r) {
+    # Moderation queue
+    td;
+     h1 'Awaiting moderation';
+     $r = $self->dbTagGet(state => 0, order => 'added DESC', results => 10);
+     ul;
+      li "Moderation queue empty! yay!" if !@$r;
+      for (@$r) {
+        li;
+         txt age $_->{added};
+         txt ' ';
+         a href => "/g$_->{id}", $_->{name};
+        end;
+      }
       li;
-       txt age $_->{added};
-       txt ' ';
-       a href => "/g$_->{id}", $_->{name};
+       txt "\n";
+       a href => '/g/list?t=0;o=d;s=added', 'Moderation queue';
+       txt ' - ';
+       a href => '/g/list?t=1;o=d;s=added', 'Denied tags';
       end;
-    }
-    li;
-     txt "\n";
-     a href => '/g/list?t=0;o=d;s=added', 'Moderation queue';
-     txt ' - ';
-     a href => '/g/list?t=1;o=d;s=added', 'Denied tags';
+     end;
     end;
-   end;
-  end;
-  clearfloat;
+
+   end; # /tr
+  end; # /table
   $self->htmlFooter;
 }