Tutorial: Centering a (fluid) div

So you don't want a set width on your div? If you want it to resize and stay centered, the same principles apply as before. Here I use 70% width as an example; adjust to suit:

#centered {
margin: auto;
width: 70%;
background-color: #E2E3E7;
border: 1px solid #B8BAC5;
padding: 11px;
}

And in your HTML:

<div id="centered">

Resize your browser to view the result - the div always remains 70% of the width of your browser window.

Easy, isn't it?

And, once again, to make sure that Internet Explorer 5 plays nicely:

body {
text-align: center;
}

(Note: I have done one more thing on this page: given the body a min-width of 375px in the CSS. This is calculated off the fixed width I gave to my example code boxes, plus padding, margins etc., and factoring in the 70% div width. The result: in standards-compliant browsers, the div will not go so narrow that the code boxes "break out" of the div. Unfortunately, Internet Explorer does not recognize the min-width property, so you may or may not have issues there. [For IE, something similar can be achieved via javascript.])

Return to main tutorials page.

Tutorial by Tim Gallant of Pactumgroup © 2005