Give the .parent relative position, then give the header absolute position with top and left set to zero.
.page{
border: 1px solid black;
}
.parent{
padding: 50px;
border: 1px solid blue;
width: 60%;
margin: 20px auto;
position: relative;
}
.header{
border: 1px solid red;
width: 100%;
text-align: center;
position: absolute;
top: 0; left: 0;
}
<div class="page">
<div class="parent">
<div class="header">this needs to ignore its parent padding</div>
<div class="content">
<p>some paragraphs</p>
<p>some paragraphs</p>
<p>some paragraphs</p>
<p>some paragraphs</p>
</div>
</div>
</div>
The header needs to have negative margins and lose the 100% width:
.header{
margin: -50px -50px 0 -50px;
border: 1px solid red;
text-align: center;
}
Here is a simplified of my DOM structure:
.page{
border: 1px solid black;
}
.parent{
padding: 50px;
border: 1px solid blue;
width: 60%;
margin: 20px auto;
}
.header{
border: 1px solid red;
width: 100%;
text-align: center;
}
<div class="page">
<div class="parent">
<div class="header">this needs to ignore its parent padding</div>
<div class="content">
<p>some paragraphs</p>
<p>some paragraphs</p>
<p>some paragraphs</p>
<p>some paragraphs</p>
</div>
</div>
</div>
All I want to do is, the red-bordered element ignores the blue-bordered element’s padding. How can I do that? In another word, the red one must be stick to the blue one from the top, left and right.
Noted that, I cannot change the HTML whatsoever.
Sorry mate I didn’t copy paste yours. I was working on it on JSBin before directly posted here.
I never said you copied mine, I simply said that my answer already covered the same
Then let it be.
