Mental Jetsam

By Peter Finch

Centering fixed width HTML Content on a page

Posted by pcfinch on April 2, 2007

Centering fixed width HTML content (like this page) on a page sounds simple, but it’s hard to make it multi-browser compatible. The best way I have found, to date, is to center the BODY text using “text-align : center;” and then have a DIV inside it (containing the content) that uses “margin-left : auto; margin-right : auto; width : 720px ; text-align : left ;“. I have tested this on IE6, FireFox 2, Opera 8.5 and Netscape 8 and it seems to work fine.

There does appear to be a little problem with FireFox, however, as the minimum width of the containing page seems to be controlled by some external source (something other that the actual page) and “min-width:640px;” does not appear to have any effect. My guess us that the minimum toolbar width might have something to do with it. This has the effect that you can only reduce the page width to a curtain size and then is stops.

<html>
<head>
<title>Center Page Content Example</title>
<style type="text/css">
<!--
body {
margin : 0px ;
border : 1px blue solid ;
padding-top: 0px ;
margin-top : 0px ;
text-align : center;
background-color : #f0f0f0 ;
}
#page {
border : 1px blue solid ;
margin-left : auto;
margin-right : auto;
width : 720px ;
text-align : left ;
background-color : #d0d0d0 ;
}
#menu {
white-space: nowrap ;
width : 80px ;
vertical-align : top ;
}
#content
{
background-color : white ;
vertical-align : top ;
}
-->
</style>
</head>
<body>
<div id="page">
<table width="100%" border="1">
<tr><td colspan='2'><h1>Center Page Content Example</h1></td></tr>
<tr>
<td id="menu">Menu 1<br>Menu 2<br>Menu 3</td>
<td id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer,
varius eu, rhoncus a,venenatis at, libero. Fusce ullamcorper orci.
Sed velit metus, mattis nec, suscipit quis, porta nec, tellus. Etiam
nulla, interdum a, eleifend non, vulputate sed, purus. Donec. Nulla
consequat, leo eget porta accumsan, justo libero vestibulum
dictum leo lectus eget lacus. Vestibulum varius, orci id tristique
arcu enim blandit elit, id dignissim odio ipsum id dolor. Sed pulvinar
arcu. Sed gravida eleifend elit. Pellentesque sit amet dui. Sed
eros. Sed lacinia velit elementum dui. Morbi bibendum quam
ligula.
</td></tr>
</table></div>
</body></html>
Advertisements

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: