Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make Child Div Element Wider Than Parent Div Using CSS
In CSS, there are times when you want to stretch a child div out over its parent div, thanks to some specific characteristics of the given content. In CSS, this is usually counterproductive since a div that is larger than its parent is going to get clipped, but certain properties can be amended for it to work.
Making Child div Wider than Parent div
This can mainly be done in two ways, the use of the overflow property and the change of position properties.
- Step 1 - Use of Oveflow: This scenario wouldn't be a problem if the parent box was made large enough, but when someone tries to outs design, they would eventually outgrow the parent and that wouldn't be good. To let a child extend out of its parent box, the visible trait of the parent box should be set to visible.
- Step 2 - Use of Position: In this case, the parent would get a relative position while its child would get an absolute position. The child container will need to have values assigned to it so that it goes over the parent's left and right limits.
Overflowing a Child Div Beyond Parent Div Width
In the following example, we'll create a parent container with a fixed width of 200 pixels and a child container with a width of 300 pixels. The child div will extend beyond the parent container, and we'll apply overflow: visible to ensure the extra width is displayed.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Make a Child div Element Wider than Parent div</title>
<style>
body {
display: flex;
justify-content: center;
font-family: Arial, sans-serif;
min-height: 100vh;
margin: 0;
align-items: center;
}
.parent {
width: 200px;
height: 300px;
background-color: blue;
color: white;
overflow: visible;
}
.child {
width: 300px;
height: 200px;
background-color: green;
position: relative;
left: -50px;
top: 30px;
color: white;
}
</style>
</head>
<body>
<div class="parent">
Parent div Section
<div class="child">
Child div Section
</div>
</div>
</body>
</html>
Output
Updated on: 2024-11-12T12:21:45+05:30
1K+ Views
Advertisements