Lining up four DIVs horizontally

[Adam]

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

[Andy Dingley]

On 24 Jul, 14:12, Adam <[e-mail]:

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 <tablecell
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.

[rf]

"Adam" <ki*************@gmail.comwrote in message
news:11**********************@k79g2000hse.googlegr oups.com...

>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?

float: left?

At the moment I have a very botched solution where I have
display:table-cell set on each of the DIVs.

IE6 does not support display: table-cell.

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.

A "box" is display: block. If you use display: inline then it is no longer a
"box", it is, er, inline.

display: inline-block is what you are probably looking for but IE6 does not
support this.

--
Richard.

[Ben C]

On 2007-07-24, rf <[e-mail]:
[...]

>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.

A "box" is display: block. If you use display: inline then it is no longer a
"box", it is, er, inline.

Well, technically the spec does talk of "inline boxes", as opposed to
blocks.

display: inline-block is what you are probably looking for but IE6
does not support this.

Or Firefox.

[Adam]

IE6 does not support display: table-cell.

Interestingly I found that everything started working when I just
added another div with display:table-row; around the boxes. Now it
works in IE6, FF and Safari. How odd...

A