How to Place Div Inside Another Div to Absolute Position

How to position absolute inside a div?

The absolute divs are taken out of the flow of the document so the containing div does not have any content except for the padding. Give #box a height to fill it out.

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

How to place div inside another div to absolute position?

You can use absolute and relative positioning.

for example

html

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

css

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

Demo at http://jsfiddle.net/gaby/MB4Fd/1/

(ofcourse you can adjust the actual positioning to you preference, by changing the top/left/right/bottom values)

Center absolute div in another div

The easy way to vertically and horizontally center a div into another goes like this:

.container {

 position: relative;

 width: 100px; /* not part of solution */

 height: 100px; /* not part of solution */

 background-color: #808; /* not part of solution */

 border-radius: 50%; /* not part of solution */

}

.content {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%);

 text-align: center; /* not part of solution */

}

<div class="container">

    <div class="content">I'm absolutly centered</div>

</div>

Position a DIV inside another DIV to the bottom and center, responsively

Here with the help of a wrapper element:

.parent{
    width: 800px;
    height:400px;
    background-color:red;
    position: relative;
}
.sibling{
    width:300px;
    height:50px;
    background-color: green;
    margin: 0 auto;
}
.wrapper{
    width: 100%;
    position: absolute;
    bottom: 0;
}

jsFiddle

center div inside another div with absolute position

I don't see the necessity of having to use attribute position set to absolute. Why not just use position: relative? It acts in a very similar manner. You can then center it by setting the parent to text-align: center and the child (itself) to margin: auto.

Bam, centered div.

Edit: According to what OP wanted:

<div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%;

It's a hack, but it works fine.

how to position divs within another div

Add position: relative to the parent .textblock-container div.

Absolutely positioned elements are positioned relative to their nearest positioned parent (e.g. the nearest parent element with a position of absolute or relative), so if they have no explicitly positioned parents (default position is static) they will be relative to the window.

Absolute position of a div inside a div without absolute position

Since an element with float collapse to its content, you need to give it a width

.col-sm-2,

.col-sm-10 {

  float:left;

  width: 100%;

}

.leftnumouter {

  color: #fff;

  font-size: 4.5vw;

  height: 4.5vw;

  width: 4.5vw;

  float: left;

  background: #393;

  position: relative;

  border: 0px solid black;

}

.rightnumouter {

  color: #fff;

  font-size: 4.5vw;

  height: 4.5vw;

  width: 4.5vw;

  float: left;

  background: #C33;

  position: relative;

  border: 0px solid black;

}

.leftnuminner {

  color: #000;

  position: absolute;

  font-weight: bold;

  font-family: Arial, Helvetica, sans-serif;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.rightnuminner {

  color: #fff;

  font-weight: bold;

  font-family: Arial, Helvetica, sans-serif;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.lefttextouter {

  background: #3C9;

  border-radius: 0 1.5vw 1.5vw 0;

  color: #000;

  font-size: 3vw;

  height: 3.2vw;

  text-transform: uppercase;

  float: left;

  padding: 0 0 0 0;

  position: relative;

}

.righttextouter {

  background: #C69;

  border-radius: 0 1.5vw 1.5vw 0;

  color: #000;

  font-size: 3vw;

  height: 3.2vw;

  text-transform: uppercase;

  float: left;

  padding: 0 0 0 .2vw;

  position: relative;

}

.lefttextinner {

  color: #000;

  margin: 0 .5vw 0 0;

}

.righttextinner {

  color: #000;

  margin: 0 1vw 0 0;

}

<div class="col-sm-2"> Blah

</div>

<div class="col-sm-10">

  <div class="preview">

    <div class="databubble">

      <div class="leftnumouter">

        <div class="leftnuminner">5

        </div>

      </div>

      <div class="lefttextouter">

        <div class="lefttextinner">Sales

        </div>

      </div>

    </div>

    <div class="databubble">

      <div class="rightnumouter">

        <div class="rightnuminner">3

        </div>

      </div>

      <div class="righttextouter">

        <div class="righttextinner">Orders

        </div>

      </div>

    </div>

  </div>

</div>

absolute positioning of divs inside parent div

I see that you have put bottom:10 use css based units like "em","px",etc.

Also, Sometimes "bottom" only works if you have a implicit height defined to parent element(in this case header)

.header {
    position: relative;
    padding-bottom: 10px;
    display:block;
    overflow:auto;
    height:100px;/* or any height you like, if not specified then bottom:xpx will not work in some cases */
}

Here is a Pen that i have made to demonstrate the same.

http://codepen.io/Prashantsani/pen/yriHa

How to top align a div inside another div

I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).

This is the structure I used for it:

<div class="parent">
    <div class="child">

    </div>
    <h1>Start</h1>
</div>

The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:

.child {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #000;
}

You will though need to set this element a fixed height and width, otherwise it will not work.

The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.

To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:

.parent:before {
    display: block;
    content: ' ';
    width: 100%;
    height: 100px;
}

Here's a working fiddle with a sample code, hope this helps you!

http://jsfiddle.net/m54rxwjv/2/

PS: This will only work if you know that the height will always be 100px.