Reputation: 3664

CSS: Create one box inside another

I am CSS beginner, want to create simple box and put another box exacly center of first box,

tried something like this

#first {
    width: 100px;
    height: 100px;
    background: red;
}
#first #second{
    width: 50%;
    height: 50%;
    background: green;
}

     
     <!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>BOX-EXAMPLE</title>
 </head>
 <body>
    <div id="first">
      <div id="second"></div>
     </div>
 </body>
</html>

but not as expected.

Upvotes: 3

Answers (5)

Pratyush Sharma

Reputation: 11

You can do something like this

#second {
  width: 60px;
  margin: auto;
  background-color: green;
}

Upvotes: 0

jbutler483

Reputation: 24549

Problem:

The issue you are having is that by default, your child elements align themselves to the top left of their parent element, and not in the center as you are expecting. In order to position your child element in the center (horizontally), you could use the css of:

margin: 0 auto;

which will place it horizontally in the middle.

Vertically aligning is slightly more difficult, as it involves ensuring it to be the correct from both top and bottom of your parent, so you could use:

top: 25%;

However, this should really only be used if your child is positioned in accordance to your parent div, and so we need to include position:absolute; into our child element.

However, if we do this, then it would be more beneficial to set it using both left and top properties, like so (in our child element):

position: absolute;
left:25%;
top:25%;

So, using this we come to our first solution:

Solution 1: Using positioning

By using absolute positioning, and making your parent have relative positioning, this will solve your problem.

#first {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
       }

       #first #second {
         position: absolute;
         width: 50%;
         height: 50%;
         background: green;
         left: 25%;
         top: 25%;
       }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>BOX-EXAMPLE</title>
</head>

<body>
  <div id="first">
    <div id="second"></div>
  </div>
</body>

</html>

Solution 2: Pseudo Effects

You may also want to use pseudo effects to reduce your markup (makes the page load slightly faster), and so we could use pseudo effects to a great beneficial degree (since we only use a single element instead of two):

This is shown below:

   #first {
     width: 100px;
     height: 100px;
     background: red;
     position: relative;
   }
   #first:after {
     content:"";
     width: 50%;
     height: 50%;
     background: green;
     position: absolute;
     left:25%;
     top:25%;
   }

<div id="first"></div>

Upvotes: 6

Vitorino fernandes

Reputation: 15951

#first {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#first #second {
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="first">
  <div id="second"></div>
</div>

Or you can also use border

#first {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  border:15px solid red;
}

<div id="first"></div>

or you can also use pseudo element

#first {
  width: 50px;
  height: 50px;
  background: green;
  position: relative;
  margin:50px;
}
#first:after{
  content:'';
  background: red;
  position:absolute;
  top:-20px;
  left:-20px;
  right:-20px;
  bottom:-20px;
  z-index:-1;
}

<div id="first">
  
</div>

Upvotes: 1

lurker

Reputation: 58244

#first {
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}

#first #second{
    position: relative;
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    background: green;
}

Fiddle

Upvotes: 7

Jason

Reputation: 106

One way is to use auto margin with absolute positioning:

#first #second {
    width: 50%;
    height: 50%;
    position: absolute; 
    margin: auto;
    background: green;
    top :0; left: 0; right: 0; bottom: 0;
}

Demo: http://jsfiddle.net/gzterxrd/