Stylesheets - getting floated left divs to center in their container

Author

getting floated left divs to center in their container

BenOne©

2004-08-23, 7:19 pm

Hi all,

I'm trying to create an image gallery with CSS but I can't get the thumbnails to
center horizontally as a group. The page, including css defined in the <HEAD> is
located at:
http://homepages.ihug.com.au/~benst...s_problems.html

Please note there are only 2 thumbnails on the page so it won't bring your
internet connection to its knees.

I have to use float:left to get the borders of the thumbnails to shrink instead
of stretching the full width of the page, but that seems to override the
text-align:left property of the parent container - and using <CENTER> doesn't
make a difference either.

Any pointers greatly appreciated.
--
Ben Thomas
Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.

Spartanicus

2004-08-23, 11:16 pm

BenOne© <nosp@m.thanks.mate> wrote:

>I'm trying to create an image gallery with CSS but I can't get the thumbnails to
>center horizontally as a group. The page, including css defined in the <HEAD> is
> located at:
>http://homepages.ihug.com.au/~benst...s_problems.html

This is currently not possible with CSS, it requires support for the CSS
2.1 "inline-block" value for the "display" property. Afaik only Opera 7
supports it, but it's support is buggy.

"inline-table" is a possible alternative, but UA support is little
better (Opera 4+ and probably Safari).

You could add the borders with a graphics editor, but that would extend
the linked region to include the borders, and you'd get jpg artifacts in
the borders.

The only way to achieve this layout is to resort to using tables:
http://www.spartanicus.utvinternet.ie/test/ben.htm

--
Spartanicus