Wednesday, October 10, 2012

Centering Layout


To center web content in a browser window (always center content no matter the size of the broswer window), involves the following steps (to be applied only after all development issues have been resolved):

1. Opening and closing div with id name added  to contain all page content (opening div goes right after opening body tag, closing div goes right before closing body tag)

<body>
<div id="mainwrapper">

[all other code that creates page content (images, text, links, etc)
should go here between opening and closing wrapper div]

</div>
</body>

2. CSS Rule for wrapper should at the very least include these properties and values. Value for min-width and max-width will be unique based on your design layout width

.mainwrapper{

max-width:600px; 
min-width:600px; 

position:relative;

margin-left:auto;
margin-right:auto;
}

No comments:

Post a Comment