Center two side-by-side divs within a container?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jamie Jackson - 29 Dec 2004 20:12 GMT

I'd like to get a couple of divs centered in a container (let's say
the container is a td, but it could also be a div).

Here's what I have now (div2 and div3 are floated left):
+---------------------------+

|+----+ +-------+ |
||div2| | div3 | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|| | | | |
|+----+ | | |
| +-------+ |

+---------------------------+

I'd like to know how to center them within their container, instead:
+---------------------------+

| +----+ +-------+ |
| |div2| | div3 | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----+ | | |
| +-------+ |

+---------------------------+

It would also be nice to know (if it is even possible) how to
automatically distribute them:
+---------------------------+

| +----+ +-------+ |
| |div2| | div3 | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +----+ | | |
| +-------+ |

+---------------------------+

Pointers, please?

Thanks,
Jamie

Reply to this Message

Spartanicus - 29 Dec 2004 23:40 GMT

>I'd like to get a couple of divs centered in a container (let's say
>the container is a td, but it could also be a div).
>
>I'd like to know how to center them within their container, instead:

display:inline-block (CSS 2.1 not supported by IE, Mozilla etc.)
display:inline-table (CSS 2.0 not supported by IE, Mozilla)

Several methods exists to get IE to play ball, none exist to get Mozilla
into line.

>It would also be nice to know (if it is even possible) how to
>automatically distribute them:

Not an option unless by specifying the widths of the divs and the
margins as percentages of the width of the containing block.

Signature

Spartanicus

Reply to this Message

Chris Leipold - 30 Dec 2004 07:43 GMT

Hi,

> I'd like to know how to center them within their container, instead:
> [...]

If div2 and div3 have known widths put another div around them with
{margin-left:auto;margin-right:auto;}.

> It would also be nice to know (if it is even possible) how to
> automatically distribute them:
> [...]

This could work with #div2, #div3 {margin-left:auto;margin-right:auto;}
but I'm not sure, try it...

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2004

Center two side-by-side divs within a container?