How do I center div tags?

Posted on 2011-05-04
Last Modified: 2012-05-11
I am trying to center the layer on the screen and it isn't working. Any ideas? I also need it to extend fluidly to the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
body {
	background-color: #ccecf3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
* {
a {
	font-size: 12px;
	color: #009fc2;
a:link {
	text-decoration: none;
a:visited {
	text-decoration: none;
	color: #009fc2;
a:hover {
	text-decoration: none;
	color: #009fc2;
a:active {
	text-decoration: none;
	color: #009fc2;
#container {
	margin-right: auto;
	margin-left: auto;
.bl {
	background: url(images/bl.gif) 0 100% no-repeat #ffffff;
	width: 75%;
.br {background: url(images/br.gif) 100% 100% no-repeat}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

<div class="container">
  <div class="bl"><div class="br"><div class="tl">
      <div class="tr">
        <p>BODY CONTENT HERE</p>

Open in new window

Question by:kallestie
    LVL 70

    Accepted Solution

    To center it, change the CSS like so:

    .bl {
          background: url(images/bl.gif) 0 100% no-repeat #ffffff;
          width: 75%;
            margin: auto;

    Any div with a width and margin: auto will center.
    LVL 2

    Author Closing Comment

    Thanks! That worked! :)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now