getting floated left divs to center in their container

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > getting floated left divs to center in their container

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

getting floated left divs to center in their container

BenOne©

08-19-04 - 04:15 AM

Hi all,

I'm trying to create an image gallery with CSS but I can't get the thumbnail
s 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 inst
ead
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.

[ Post Follow-Up to this message ]

Re: getting floated left divs to center in their container

Spartanicus

08-19-04 - 12:15 PM

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

>I'm trying to create an image gallery with CSS but I can't get the thumbnai
ls to
>center horizontally as a group. The page, including css defined in the <HEA
D> 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

[ Post Follow-Up to this message ]

Re: getting floated left divs to center in their container

Els

08-19-04 - 12:15 PM

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

[ Post Follow-Up to this message ]

Re: getting floated left divs to center in their container

Els

08-24-04 - 12:19 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

[ Post Follow-Up to this message ]