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>
Mental Jetsam 
Leave a comment