Stylesheets - getting floated left divs to center in their container

Author

getting floated left divs to center in their container

BenOne©

2004-08-18, 11:15 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-19, 7:15 am

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

Els

2004-08-19, 7:15 am

BenOne© wrote:

> 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...photography/css
> _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.

Use text-align:center on the containing div, and instead of
using shrink-to-fit divs around the pictures, give those divs
absolute widths (easy if they're all the same width), or else
give them custom borders or something. Or as a last resort,
include the border in the image?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Legião Urbana - Há Tempos

Els

2004-08-23, 7:19 pm