Previous Message
Next Message

symmetry: Horizontal centering divs

Sent by Tony Martin on 8 December 2005 15:03


I have looked in the archives and googled, but I still cannot see how to do 

I want to have a number of small divs (lets say they have equal width eg 
100px) stacked next to each other but overall centred in a liquid center 

I can stack them by using float left, but what I want is for the overall 
stack to be centered in the centercontentdiv.  And to make the solution 
general so that the small divs can contain images, headings lists and paras. 
  I can do all this if I accept that the result will be a block of divs 
aligned to the left.  But it would be so nice to get symmetry by making them 
overall centered, without having to fix the width  of the center area.  That 
is as the area squidges, less small divs per line and as it widens, more 
divs per line, but still nicely centered.

There does not seem to be a complete solution to this, although I would be 
delighted if someone can tell me I am overlooking something.

I have tried creating an outer div with display: table-cell;  this seems to 
shrink wrap (in Firefox), but I still cannot make it center using margin: 0 
auto;  even putting it in a wrapper div with width 100%.

I have tried it with images and inline divs, this works to a degree, but 
block elements inside the inline div then drop out.  I would have thought 
there would be a way to create a div with all sorts of content and then 
treat the whole thing as inline, but it doesnt seem to work that way.  (I 
need to go back and read Eric's book again I know)

My plea is - does anyone have a working solution for this - ie small divs 
with various content (but fixed width) that will block together according to 
the browser width AND that will center in the middle of the screen.  It 
would just look so nice and would be a great Christmas present.

Currently I find myself having to fix the center area width whenever I want 
to achieve nicely centered results and that's a shame.

Regards and Hopeful

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: