You can't center APDivs. My advice is to drop APDivs altogether. You don't need them. You shouldn't use them except for very special situations anyway. Also your CSS code is unecessarily bloated with stuff you don't need. Start with a simple centered layout like this one. <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Layout</title> <style> body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; width: 1000px; margin: 0 auto; /**with width, this is centered**/ padding: 0; color: #000; background: #069; } section { margin: 0; padding: 0; background: #FFF; overflow: hidden; /**float containment**/ } header { margin: 0; padding: 0; min-height: 50px; background: #FFC } section aside { margin: 0 1%; padding: 0 1%; float: left; width: 29%; background: #FFF; border: 1px dotted #CCC; min-height: 100px; } /**clear floats afterwards**/ aside-nth:child(3) { clear:left; } footer { min-height: 25px; background: #9CCDCD; overflow: hidden; } footer aside { float: left; width: 48%; padding: 0 1%; } /**re-usable classes**/ .center {text-align:center} .right {text-align:right} /**TEXT STYLES**/ h1, h2, h3, h4 {margin:0;} p {font-size: 1em} </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section> <header> <h1>Header</h1> </header> <!--columns--> <aside><p>Aside</p> <h3>Heading 3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p></aside> <aside><p>Aside</p> <h3>Heading 3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p></aside> <aside><p>Aside</p> <h3>Heading 3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p></aside> </section> <footer> <aside>Footer <aside></aside> <aside class="right">Footer <aside .right></aside> </footer> </body> </html> Add a few styles for things you need and nothing you don't. Keep it simple. Nancy O.
... View more