HighDots Forums  

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

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Center two side-by-side divs within a container? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Jamie Jackson
 
Posts: n/a

Default Center two side-by-side divs within a container? - 12-29-2004 , 03:12 PM






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):
+---------------------------+
Quote:
+----+ +-------+ |
|div2| | div3 | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
+----+ | | |
+-------+ |
+---------------------------+

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

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

Pointers, please?

Thanks,
Jamie


Reply With Quote
  #2  
Old   
Spartanicus
 
Posts: n/a

Default Re: Center two side-by-side divs within a container? - 12-29-2004 , 06:40 PM






Jamie Jackson <junxies (AT) hotmail (DOT) com> wrote:

Quote:
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.

Quote:
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.

--
Spartanicus


Reply With Quote
  #3  
Old   
Chris Leipold
 
Posts: n/a

Default Re: Center two side-by-side divs within a container? - 12-30-2004 , 02:43 AM



Hi,

Quote:
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;}.

Quote:
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 With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.