Div in a div centering CSS

Question

I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:

* {
  margin: 0px;
  padding: 0px;
}



body {

  background-color: #3D3D3D;
  padding: 30px;

}


#box{
  background-color: gray;
  border: solid black 4px;

}


#header {
  height:60px;
  width: 800px;
  margin: auto;
  border: solid black 2px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 60px;

background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);   
}

#header a {
  font-size: 22px;
  color: black;
  margin: 30px;
  text-decoration: none;
}


img#code {
    display: block;   
    margin: auto; 
    margin-bottom: 10px;
    margin-top: 30px;
    width: 500px; 
}

#container{
  width: 800px;
  border: solid white 2px;
  margin: auto;
  margin-bottom: 30px;
}

.splitter {
  width: 500px;
  height: 5px;
  background-color:black;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 35px;
}


#text1{
  background-color: #999999;
  margin: auto;
  margin-bottom: 30px;
  width: 500px;
  text-align: left;
  border-radius: 5px;
}

.inside{
  margin: 30px;
}

#text1 h3{
  border-bottom: solid black 1px;
}

.border{
  width: 200px;
  margin-top: 20px;
  margin: auto;
  text-align: center;
}


#box2{
  width: 500px;
  height: 100px;
  background-color: blue;
  margin: 70px auto ;
  position: relative;

}

.midbox{
  width: 100px;
  height: 50px;
  background-color: red;
  margin: 30px auto;
  position: absolute;

}






and html




<html>
  <head>
  </head>

  <body>

    <div id="box">
    <div id="header">
      <a href="">About Me</a>
      <a href="">Hobbies</a>
      <a href="">Pictures</a>
      <a href="">Contact Me</a>      
    </div>


      <div id="container">

<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>

        <div class="splitter"></div>

        <div id="text1">
            <div class="border">
              <h3> Coding in clouds</h3>
            </div /* border */>
              <br>
          <div class="inside">
              <p> From coding, to Scripting. We all share
                the same fate. We look, obsereve, figure out, 
                and analyze everything around us. We have an
                eye to solve things, put things together, Fix
                things, and show our pride when the work is done;
                yet many of its roots gets unoticed. 
                <br> <br> To other souls,
                we are just a body stuck in this world, but we, in fact
                are the ones that assebles technology, make things whole,
                and make everyone become one in this crazy thing
                called the Web. We are Software developers. We code,
                we fix, and we make it possible.
            </div inside>


        </div /*text1*/>

           <div id="box2">
                   <div class="midbox">
                     hello
                   </div>
           </div>

      </div /* container */>

    </div /* box */>





  </body>

</html>

Answer 1

Something like this perhaps?

http://jsfiddle.net/tezf8/1/

You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2

Here is the CSS:

#testbox{
  border: 3px solid red;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
 }

.testbox2{
  border: 3px solid blue;
  width:100px;
  height:100px;
  margin: 48px auto;
}

Answer 2

Try This:

CSS

#testbox{
    border: 3px solid red;
    width: 200px;
    height: 200px;
    margin:0 auto;
    margin-top:40px;
    position:relative;
}

.testbox2{
    border: 3px solid blue;
    width:100px;
    height:100px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

HTML

<div id="testbox">
    <div class="testbox2">
    </div>
</div>

Div in a div centering CSS

Question

2 answers

solution1
1 2013-12-24 02:51:59

solution2
0 2013-12-24 02:46:07

Div in a div centering CSS

Question

2 answers

solution1 1 2013-12-24 02:51:59

solution2 0 2013-12-24 02:46:07

solution1
1 2013-12-24 02:51:59

solution2
0 2013-12-24 02:46:07