Div inside another Div - CoreLangs.com

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.

Syntax

<div>....</div>

A simple div example:

<div>
  <h2>A simple Div</h2>
</div>

output

A simple Div

How to contain one div inside another

In some situations, we have to place one or more Div inside another Div.

<div>
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

Positioning a div inside another div

output

First Div

Second Div

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.

<div>
  <div style="float:left">
    <h2>First Div </h2>
  </div>
  <div style="float:left">
    <h2> Second Div</h2>
  </div>
</div>

output

First Div

Second Div

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;

CSS float

<div>
  <div style="float:left">
    <h2>First Div </h2>
  </div>
  <div style="float:right">
    <h2> Second Div</h2>
  </div>
</div>

output

First Div

Second Div

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.

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      top: 25%;
      margin: 0 auto;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Div top center

Following program position Div at the top center of parent Div

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      margin: 0 auto;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Div bottom center

Following program position Div at the bottom of parent Div

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      top:50%;
      margin: 0 auto;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Position Div on top right corner

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      left:50%;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Position Div on top left corner

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Position Div on bottom right corner

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      top:50%;
      left:50%;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>

Position Div on bottom left corner

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    #outer{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    #inner{
      width: 50%;
      height: 50%;
      top:50%;
      position: relative;
      background:orange;
    }
  </style>
</head>
<body>
  <div id=outer>
    <div id=inner>
    </div>
  </div>
</body>
</html>