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>

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) and a multitude of others including one from yesterday with this same question. — Rob, Jan 04 '15 at 15:24

Travis · Answer 1 · 2013-12-24T03:21:47.983

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;
}

edited Dec 24 '13 at 03:21

answered Dec 24 '13 at 02:51

Travis

369
1
9

The inner box has an overall width of 106px. The top margin needs to account for the 3px border, hence, `margin: 48px auto` does the trick. Your technique is fine otherwise. – Marc Audet Dec 24 '13 at 03:15
1

Good call @MarcAudet. I've updated my answer to accommodate the border – Travis Dec 24 '13 at 03:23

score 0 · Answer 2 · answered Dec 24 '13 at 02:46

0

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>

answered Dec 24 '13 at 02:46

Nick Salloum

2,158
12
13

i added my full css and html its still giving me a hard time – user3466255 Dec 24 '13 at 21:28
your HTML markup is flooded with errors though. [Here's the fiddle](http://jsfiddle.net/6Mpmb/) stripped down of everything else. Correct your errors and implement this and you'll be good. – Nick Salloum Dec 27 '13 at 22:48

Div in a div centering CSS

2 Answers2