Why center tag or margin:auto does not work when it appears that it should

Sometimes in coding a page a center tag is inserted or a margin:auto and it appears to be ignored. Mostly this happens in tableless CSS with a more complex set of styles some floating or absolute.

For the content to properly center the width of the area that it needs to be centered in needs to be known. When the area / block width is the same as the width of the content that needs to be centered – nothing changes when it is centered.

In standards mode what should happen is the block should have 100% width. This does not happen when the block is next to a block which is floating to the right or to the left and there is no CSS setting to set the width to be 100% of the remaining space. It is also inconsistent with different browsers.

The solution is to specifically set the CSS style width of the parent that the content should be centered in.

Another option would be for the area that should use the remaining space; do not make it a block instead let this content’s parent be the same parent as the block that floats.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: