The Play of divs inside each-other.

THE DIV INSIDE IS A GOOD TOPIC TO COVER BECAUSE THERE IS A LOT OF CONFUSION  TO MAKE THIS THING WORK PROPERLY. SO I AM SHARING MY EXPERIENCE TO WORKING WITH DIVS.

let us make two dive like this

<div id=”outer”>

<div id=”inside’>

</div>

</div>

———————– css to play with ———————–

#outer{

width:200px;                 // 1.  if you don’t give the value of height and width then its OK.

height:200px;            // 2. IF you right that display:inline then all the inside div will have no effect of that. they will sit inside no matter if  display : block or display:inherit

border:5px solid gray;

display:inherit;     // if you give display:absolute then the whole div block will have the effect and still it will be good for inside divs

}

#inside                                       // this is the inside div

{

width:100px;

height:100px;

margin : 0px auto; // this will make it to move to the center of the outer div

position:      //( 1. if  :absolute then its ok , 2. if :static 3. if :relative then its ok . but relative will leave its not taking the full of width and height . )

display: block ; // display:box.  no effect same and its ok to have them

display :inline ;// give the behave like the pic 2 and all have the pic 1 effect

 

}

 

// ————————— pic 1———————————