Lining up four DIVs horizontally

Giganews Newsgroups
Subject: Lining up four DIVs horizontally
Posted by:  Adam (kindredhyperi…@gmail.com)
Date: Tue, 24 Jul 2007

I have four roughly square DIVs, all the same height, which I need to
line up horizontally across the page. What would be the best way to do
this? At the moment I have a very botched solution where I have
display:table-cell set on each of the DIVs. This works as far as
lining them up is concerned, however to get any spacing between them
the only thing I could do was to put some   in between each one
(margin had no effect).

This works, in Firefox & Safari, but not in IE where the boxes line up
vertically. Also, adding an image into one of the divs causes it to go
very weird in firefox. It works fine in Safari.

I would have thought that display:inline; or similar would work for
this, but when I tried that the boxes seemed to lose their boxness.

Hopefully you get some idea of where I'm going with this(!), and any
advice would be appreciated.

A

Replies