Topic: The "Center the Container" Challenge (Page 1 of 1)

OK, so I need some help here. The solution will either be exceptionally complicated or childishly simple. Either way, it's currently eluding me.

Here's a link to an extremely simplified version of the template I'm using for an upcoming site:

http://wesleytreat.com/test/

The content in question is the collection of blue boxes. These would normally contain thumbnails and blurbs for individual photos. The stock layout that came with the photo-management software I'm employing previously used a table to present the boxes. I switched it to floated divs, so that the number of divs on a row increased fluidly to make better use of one's chosen browser width.

The problem, which is only an esthetic one, though one that bothers me greatly, is the asymmetrical way in which the boxes display inside the template. If only I could center div#container and shrink it to the width of its contents, I'd be happy. (I have found a way to do this in IE, but of course, only in IE. See the source.)

Any ideas?

http://pmob.co.uk/pob/centred-float.htm ?

Try adding

body { text-align: center; }
div#container { margin: 0 10% 0 10%; }

to your style sheet.

.



-- not necessarily stoned... just beautiful.


(Edited by hyperbole on 10-27-2007 06:59)

Ahh ... PMOB's solution worked. I had thought of using the -50% trick, but not of floating the container to collapse the width, which is what makes the -50% the correct distance.

Thanks!

quote:

---

Wes said:

Ahh ... PMOB's solution worked.

---

they usually do. That's a great site for this kind of stuff. Glad that he updated the look of that site

Later,

C:\

Yeah it was a little '90s.