Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering multiple divs horizontally 1

Status
Not open for further replies.

davefore

Technical User
Aug 10, 2005
7
US
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: 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
 
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.
 
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?
 
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:
Code:
#prop1 { 
 margin-left: 22px;
 ...
 }

* html #prop1 { margin-left: 11px; }
 
Thanks a lot for your help Vragabond. I'll give this a shot.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top