How to place a Div inside another Div
CSS Div (division) is a container element and it is used to group related items together. The use of div tag is straightforward.
A simple div example:
How to contain one div inside another
In some situations, we have to place one or more Div inside another Div
Positioning a div inside another divOutput:
In the above output, you can see the Div place up and down because CSS Div is a block element that forces a line break before and after the element. In some situation you have to place these Div side by side.
CSS Div side by side
CSS float property enables you to take an element out of normal flow and put content side-by-side. The following example shows how place Div side by side in an HTML page.
In the above output you can see the Divs are placed side by side. Here second Div placed next to the first Div because we set the second Div float:left;. Float property accepts keyword values left and right float elements those directions respectively and set to none for not floated. If you want to place these Divs left side and right side of your screen, you should specify second Div float:right;
Div position relative to parent
Center a Div within another Div
In some situation you may have to position one Div exactly at the center of another Div. That means position Div center horizontally and Div center vertically inside of another Div.
Div top center
Following program position Div at the top center of parent Div
Div bottom center
Following program position Div at the bottom of parent Div
Position Div on top right corner
Position Div on top left corner
Position Div on bottom right corner
Position Div on bottom left corner