467,920 Members | 1,261 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,920 developers. It's quick & easy.

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

Jul 24 '07 #1
  • viewed: 8155
Share:
4 Replies
On 24 Jul, 14:12, Adam <kindredhyper...@gmail.comwrote:
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.

Jul 24 '07 #2
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.
Jul 24 '07 #3
On 2007-07-24, rf <rf@invalid.comwrote:
[...]
>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.
Jul 24 '07 #4
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

Jul 24 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Chris | last post: by
20 posts views Thread by Firas D. | last post: by
6 posts views Thread by skeeterbug | last post: by
2 posts views Thread by Guadala Harry | last post: by
29 posts views Thread by eholz1 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.