How to Put A Div Inside Another Div Using CSS

When working with web design and layout, it's common to need to place one div element inside another div element. This allows for structuring content and creating complex arrangements on a webpage. CSS (Cascading Style Sheets) provides various techniques to accomplish this task. By utilizing CSS properties and selectors, you can easily nest div elements and control their positioning and styling. In this guide, we will explore different methods such as nesting, absolute positioning, flexbox, and grid, enabling you to confidently place a div inside another div and achieve the desired layout for your web pages.

01. Using Nesting Div
02. Using Absolute Positioning
03. Using Flexbox
04. Using Grid

01. Using Nesting Div:

<!DOCTYPE html>
<html>
  <head>
    <title>How to Put A Div Inside Another Div Using CSS | Rustcode</title>
    <style>
      .outer{
      width: 200px;
      height: 200px;
      background: lightblue;
      padding: 10px;
      }
      .inner{
      width: 100px;
      height: 100px;
      background: lightyellow;
      margin-top: 10px;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      outer div
      <div class="inner">
        inner div
      </div>
    </div>
  </body>
</html>

Output:

outer div

inner div

In this method, you simply nest the inner div within the outer div in your HTML markup. You can then apply CSS styles to each div as needed.

Read Also:

02. Using Absolute Positioning

<!DOCTYPE html>
<html>
  <head>
    <title>How to Put A Div Inside Another Div Using CSS | Rustcode</title>
    <style>
      .outer{
      position: relative;
      width: 200px;
      height: 200px;
      background: lightblue;
      padding: 10px;
      }
      .inner{
      position: absolute;
      top: 30;
      left: 10;
      width: 100px;
      height: 100px;
      margin-top: 10px;
      padding: 10px;
      background: lightyellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      outer div
      <div class="inner">
        inner div
      </div>
    </div>
  </body>
</html>

Output:

outer div

inner div

This method positions the inner div absolutely within the outer div using the position: absolute property. Adjust the top and left values as needed to position the inner div within the outer div.

Read Also:

03. Using Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>How to Put A Div Inside Another Div Using CSS | Rustcode</title>
    <style>
      .outer{
      display: flex;
      width: 200px;
      height: 200px;
      background: lightblue;
      padding: 10px;
      }
      .inner{
      width: 100px;
      height: 100px;
      margin-top: 30px;
      padding: 10px;
      background: lightyellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      outer div
      <div class="inner">
        inner div
      </div>
    </div>
  </body>
</html>

Output:

outer div

inner div

With this method, you make the outer div a flex container by applying display: flex to it. This automatically makes the inner div a flex item, which is placed inside the outer div.

Read Also:

04. Using Grid:

<!DOCTYPE html>
<html>
  <head>
    <title>How to Put A Div Inside Another Div Using CSS | Rustcode</title>
    <style>
      .outer{
      display: grid;
      width: 200px;
      height: 200px;
      background: lightblue;
      padding: 10px;
      }
      .inner{
      width: 100px;
      height: 100px;
      padding: 10px;
      background: lightyellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      outer div
      <div class="inner">
        inner div
      </div>
    </div>
  </body>
</html>

Output:

outer div

inner div

This method makes the outer div a grid container by applying display: grid. The inner div becomes a grid item within the outer div, and you can further define the grid layout using additional CSS properties.

Read Also:

Archive