Topic: The "Center the Container" Challenge Pages that link to <a href="https://ozoneasylum.com/backlink?for=29653" title="Pages that link to Topic: The &amp;quot;Center the Container&amp;quot; Challenge" rel="nofollow" >Topic: The &quot;Center the Container&quot; Challenge\

 
Author Thread
Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-27-2007 02:52 Edit Quote

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?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-27-2007 04:30 Edit Quote

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

hyperbole
Paranoid (IV) Inmate

From: Madison, Indiana
Insane since: Aug 2000

IP logged posted posted 10-27-2007 06:50 Edit Quote

Try adding

code:
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)

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

IP logged posted posted 10-29-2007 08:22 Edit Quote

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!

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 10-29-2007 15:35 Edit Quote
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:\

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-29-2007 16:14 Edit Quote

Yeah it was a little '90s.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu