Lining up four DIVs horizontally

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

On 24 Jul, 14:12, Adam <kindredhyper... RemoveThis @gmail.com> wrote:
> I have four roughly square DIVs, all the same height, which I need to
> line up horizontally across the page.

Hard to say, without knowing how best they should behave if they
_don't_ fit across the page. Placing each one inside a <table> cell
works, if you really do want a rigid grid behaviour, preserved as much
as possible. Using display:inline; will also work, but as you point
out, they lose "blockiness". display:inline-block; is often the
perfect solution in principal, but support is too narrow to recommend
using it.

Generally the best all-around solution is to use float. Read
http://brainjar.com/css/positioning/ for a good tutorial on how to,
and how to tidy up with clear afterwards. It's not as simple as you
expect, but it's worth studying, at least for an example.