0

Hmm this is strange.

It works in IE but not FF.

Please take a looks at: http://www.sumsy.com/temp/test11/test.html (table is 980px initially) http://www.sumsy.com/temp/test11/test2.html (table expanded to 1200px)

The problem is, after table is expanded, the outer most div (#body-left) is not centered any more in FF. The space on the left remains the same.

I checked with firebug, it looks like the #body-left div width is fixed at 999px, so it didnt expand when table expands.

I can some how fix it by removing the 999px width from #body-left div. But if i do that, the div wont center any more.

I need it to be centered, so I have to specified a width for it?

Any work around?

Thanks.

Shadow_boi
  • 2,178
  • 2
  • 21
  • 26

1 Answers1

2
  • Remove the width property from #body-left, and add display: inline-block.
  • On body, add text-align: center.
  • On #body-left, add text-align: left.

Live Demo

If you care about IE7, add to #body-left: *display: inline; zoom: 1.

thirtydot
  • 224,678
  • 48
  • 389
  • 349