CODEWITHSUNDEEP
javascripthtmlcss
Mack
Mack

Reputation: 75

Div just wont get centred

Helo

I have some weird stuff going on with my HTML & CSS, I have a 2 nested divs that SHOULD be displayed horizontally centred inside their parent element, but they are positioned to the left instead.

What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        html, body { height: 100%; width: 100%; }
        body       { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; }

        #outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
        #header         { width: 30%; height: 180px; background-color: blue; }
        #main           { width: 1200px; height: 60%; background-color: red; }

    -->
    </style>

    <script type="text/javascript">
    <!--

    -->
    </script>

</head>
<body>

    <div id="outerContainer">

        <div id="header">

        </div>
        <br/>
        <div id="main">

        </div>

    </div>


</body>
</html>

Upvotes: 1

Views: 107

Answers (5)

rrapuya
rrapuya

Reputation: 298

try this one: jsFiddle

<div id="outerContainer">

        <div id="header">

        </div>
        <div id="main">

        </div>

 </div>


 #outerContainer { background-color: #DCFF9A; height: auto; width: auto; float:left;}
  #header         { width: 30%; height: 180px; background-color: blue;display:block;margin:auto; }
  #main           { width: 1200px; height: 60px; background-color: red;display:block;margin:auto; }

Upvotes: 0

Larsenal
Larsenal

Reputation: 51156

Just add the following to your CSS:

#header, #main {margin: auto;}

Upvotes: 0

Ben
Ben

Reputation: 57227

Use margin:0 auto to center block elements with known width.

(The parent may also need a width set.)

Upvotes: 1

Xepo
Xepo

Reputation: 616

text-align seems to only affect text, not blocks. Try specifying:

    #header         { width: 30%; height: 180px; background-color: blue; margin-left: auto; margin-right: auto; }
    #main           { width: 1200px; height: 60%; background-color: red; margin-left: auto; margin-right: auto; }

http://www.w3schools.com/css/css_align.asp

Upvotes: 0

sybohy
sybohy

Reputation: 1876

Could you try the following additional attribute in your css for the two div tag that won't center:

margin: auto;

such that:

#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
#header         { width: 30%; height: 180px; background-color: blue; margin: auto;}
#main           { width: 1200px; height: 60%; background-color: red; margin: auto;}

Upvotes: 3

Related Questions