How to Make a Child Div Element Wider than Parent Div using CSS ?

Last Updated : 07 May, 2023

When the child div element has a fixed width that is wider than the parent div element, it will display overflow outside of the parent element. Because the overflow is hidden by default, one approach is to utilize the overflow attribute to enable it on an element.

Another approach includes setting the position property of the parent div element to relative and after the position property of the child div element to absolute. Then, set the child div element’s left and right values to 0 to stretch it to the entire width of the parent div element.

Example 1: The parent div element has a width of 300 pixels and a height of 200 pixels. The child div element is 400 pixels wide and 100 pixels tall, making it wider than the parent div element.

To allow the child div element to overflow outside of the parent div element we have set the overflow property of the parent div element to visible.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Make a Child Div Element Wider  
        than the Parent Div 
    </title> 
      
    <style> 
        body { 
            font-family: cursive; 
        } 
  
        .parent { 
            width: 300px; 
            height: 200px; 
            border: 3px solid crimson; 
            overflow: visible; 
        } 
  
        .child { 
            width: 400px; 
            height: 100px; 
            background-color: green; 
            color: white; 
            text-align: center; 
            padding: 10px; 
            position: relative; 
            left: -50px; 
            top: 20%; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div class="parent"> 
        <div class="child"> 
            A Computer Science portal for geeks.  
            It contains well written, well thought  
            and well explained computer science  
            and programming articles. 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: In this example, we are using the position property to fit the child div.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Make a Child Div Element Wider  
        than the Parent Div 
    </title> 
      
    <style> 
        body { 
            margin: 10rem; 
            font-family: cursive; 
        } 
  
        .parent { 
            width: 300px; 
            height: 200px; 
            border: 3px solid crimson; 
            position: relative; 
        } 
  
        .child { 
            width: 400px; 
            height: 100px; 
            background-color: green; 
            color: white; 
            text-align: center; 
            padding: 10px; 
            position: relative; 
            left: -50px; 
            top: 20%; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="parent"> 
        <div class="child"> 
            A Computer Science portal for geeks.  
            It contains well written, well  
            thought and well explained computer  
            science and programming articles. 
        </div> 
    </div> 
</body> 
  
</html> 