Centering multiple divs horizontally 1

[davefore]

Hi guys,

I am fairly new to CSS and wanted to see about the best way to center some things horizontally.

I have a div container holding 4 separate divs that are all floated left so that they stack horizontally. However, I want them to be equal distance apart from each other and be centered within the container div. I tried using text-align: center in the container but that didn't work. So then I added some space to each of the left margins of each separate div to "emulate" this effect. You can see it here:

http://www.theagentsyouwant.com

where it says TOP REAL ESTATE LISTINGS.

In IE I got it pretty close. In Firefox it sits too far left.

What's the *right* way to get these divs centered and equal distance from each other?

Thanks for any suggestions.

Dave Fore

 

[Vragabond]

Unfortunately, since you're using floats, there is no easier way to do this, AFAIK. The calculation, 150px + 2*6px + 2*2px = 166px * 4 = 664px - 776px = 112px / 5 = appx. 22px. So there should be 22px gap between every div to make it even, however, I do know that IE has a little warped understanding of margins sometimes and just like in your example, the first margin-left which is 9px is actually rendered 18px in IE. You could use a hack to alter that setting just for IE. Other than that, I cannot think what you could do.

 

[davefore]

That really sucks. Perhaps I need to go back to using tables here.

I don't even know how to write a separate hack for IE using CSS. Does this require using browser detection and serving a different stylesheet?

 

[Vragabond]

Nope, you just add an extra declaration for the item you want changed (#prop1 in your case). This declaration is seen only by IE and ignored by other browsers:

#prop1 { 
 margin-left: 22px;
 ...
 }

* html #prop1 { margin-left: 11px; }

 

[davefore]

Thanks a lot for your help Vragabond. I'll give this a shot.