Display:table for IE7 ?

Question

Hi

I've a several columns in css, with float:left property to align them horizontally. But as it float in the left side, i can't center all the divs.

So i found that if i wrap my columns with another div with display:table property, all works perfectly... but not in IE7 (idd, this property is not supported -.-).

does anybody has a hack or trick for this ?

Here is my code :

<div style="display:table">
 <div style="float:left">A column</div>
 <div style="float:left">A column</div>
 <div style="float:left">A column</div>
 <div style="float:left">A column</div>
</div>

Answer 1

Hm, why are you having a float: left on your leftmost div? I think that will cause some trouble. Do you have any css? You should have margin-left: auto and margin-right: auto on your outer div. Take a look on this page, there's all the details. Seems like you might have to add br-tags or similar too

Answer 2

if you use display:table; on the parent dic, you should have display:table-row; and display:table-column;-elements in it - and floating doesn't make any sense in that case. please take a look at this or ask google for more information.

(if you want to display a table, why don't you use the table-element? In cases where tables are used for layout, thats a bad practice, but doing the same sh*** by substituting table-crap for divitis doesn't make it better)

EDIT: if you just want't do display your divs side by side and centered, you could simply try to use display:inline; or display:inline-block; (but the last will make problems in IE, too) - and remove that senseless display:table; on the parent-div