Re: Positioning fixed width content in the center of the page

1) For centering a table on the page:

Don't use the align attribute, since this attribute means "align the 
content of the block element left, right or center". This would mean 
that the text in your cells will be centered, not the table on the page 
itself.

To center a block element inside another one (the page being the body 
element) you will need to define an right and a left margin equal to 
each other, as well as define the width of the element.

The absolute way: assuming your body is 600px wide and you want to 
center a 400px wide table on the page, you'll write the following CSS:
table {width: 400px; margin-left: 100px; margin-right: 100px;}

The relative way: assuming you don't know how wide your body is. (works 
only in NS6. IE 5.5 is buggy about this (doesn't understand 'auto')
table {width: 400px; margin-left: auto; margin-right: auto;}

Of course you can also use percentages:
table {width: 60%; margin-left: 20%; margin-right: 20%;}

2) About your image with a wider width than the container:

If you specify a width, the browser HAS TO respect that. If you say 50px 
he will make it 50px, even if you put an element inside that is 100px; 
In such a situation, and this is an absolutely correct behavior, the 
100px wide element will go out of the borders of its container.

Hope that helps,

Erich Iseli

Received on Friday, 20 April 2001 05:59:57 UTC