HOME       >>       Programming

Fixed Centred Layout Learn how to code that popular Centred/Fixed width layout...


I remember learning this so long ago after piecing together some tutorials. First , put together your basic HTML Code. Nothing complicated , but it should probably look like this;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Your Site Name</title></head><body><div id="layout">All but All content should be here</div></body></html>

The ID is important. It doesn't matter what you ID/Class it as , as long as it has a value/Id . The entire tutorial is useless otherwiseOpen a new CSS file , or make a new one in notepad

body { text-align: center; }#container { margin: 0 auto; width: abcpx; text-align: left;}

Body defines the entire document. The Body text align; center is used for the general code.The container tag defines the container ID we declared earlier .The Textalign left means all text within the container will be aligned left . The Margin tag defines no Margins on top or bottom but auto margins on the left. So replace Abc with whatever width you care to add , and the layout will be centred according to that width. That's essentially it. There are several other tweaks , but aren't really neccesary. Hoping I helped in some way , Encryptedwrath ;)NOTES:1) The text align is compulsary for IE users. Other browsers display the code fine without it


I would just like to add why it is necessary to use text-align: center. If you tried creating a layout with that line of CSS code, everything would look fine in Opera and Firefox, which is how it should work. However, in IE, it would not. That's why you have to add text-align: center, which, oddly enough, helps. Why oddly enough? Well, the name says it all - text-align, not div-align. After all, it's Microsoft we are talking about and their lack of respect for WWW standards.


Thanks Pyost , will add that in


Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.