DH Templates - Can someone help me center the layout? CSS?

Can someone help me center the layout? CSS?

I'm trying css codes on textpad and I can't seem to center it, Ive been on websites that teaches u, but it didnt change. So can someone help me out by repasting the code with a code that will center it to be in the middle? Thanks for your help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Template</title> <meta name="description" content="Template Description" /> <meta name="keywords" content="word1, word2, word3, word4, word5, wordn" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> /*Container Settings*/ div.container { font-family:"arial",veranda; position:absolute; top:1.5em; left:1.5em; width:50em; height:55em; margin:0px; border:1px solid #000000; line-height:100%; font-size: 1em; } /*h settings*/ h1 {color:#00ff00; font-size: 200%} h2 {color:#ff0000; font-size: 150%} h3 {color:#00ff00; font-size: 125%} h4 {color:#ff0000; font-size: 100%} /*p settings*/ p { color:#484848; font-size: 100%; } p.leftsidebar { color:#000000; font-size: 80%; } p.centercontent { color:#484848; font-size: 80%; line-height:125%; } p.rightsidebar { color:#ff0000; font-size: 80%; } /*list*/ ul.square {padding-left:1em; list-style-type:square; font-size: 80%;} /*links */ a:link {text-decoration:none; color:#484848} a:visited {text-decoration:none; color:#484848} a:hover {text-decoration:none; color:#ff0000} a:active {text-decoration:none; color:#484848} /*div settings*/ div.header { width:50em; height:5em; background-color: #FFFFFF; padding:0em; color:white; } h1.header { text-align:center; padding:1em; margin:0em; font-size: 100%; color: black; } /*Left Sidebar*/ div.leftsidebar { position:absolute; top:5em; left:0em; background-color: #cccccc; width:10em; height:50em; margin:0em; padding-top:0em; padding-bottom:.0em; padding-right:.5em; padding-left:.5em; line-height:125%; z-index:1; } /*Right Sidebar*/ div.rightsidebar { position:absolute; top:5em; right:0em; background-color: #00ff00; width:10em; height:50em; margin:0em; padding-top:0em; padding-bottom:0.0em; padding-right:0.5em; padding-left:0.5em; line-height:125%; z-index:1; } /*Center Content*/ div.centercontent { position:absolute; top:5em; left:10.93em; right: 10.93em; height:47.75em; border:1px dashed #ff0000; padding-top:0em; padding-bottom:0.0em; padding-right:0.5em; padding-left:0.5em; line-height:125%; z-index:3; } /*p Footer*/ div.footer { position:absolute; bottom:.0em; left:0em; right:0em; height:1.5em; padding:0.5em; font-size: 75%; border:2px solid #484848; color:white; background-color:#484848; z-index:2; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">NCAweb.net Template</h1></div> <div class="leftsidebar"><p class="leftsidebar"> <ul class="square"> <li><a href="about.template.html">About</a></li… <li><a href="contact.template.html">Contact</a>… <li><a href="page1.template.html">Page 1</a></li> <li><a href="page2.template.html">Page 2</a></li> </p></div> <div class="centercontent"> <h3>Home</h3> <p class="centercontent">

Public Comments

Try using the following 3 methods: 1. Use text-align: center; (this doesn't always work) 2. Specify a specific width, e.g. 20em, and then specify margin: auto 3. Use the <center> element
Like this? (I changed left: 1.5em in "div.container" to 7em (just use a bigger number than 1.5, and it pushes it that distance away from the left margin) <head> <title>Template</title> <style type="text/css"> /*Container Settings*/ div.container { font-family:"arial",veranda; position:absolute; top:1.5em; left:7em; width:50em; height:55em; margin:0px; border:1px solid #000000; line-height:100%; font-size: 1em; } (the rest stays the same)