-3

I have a container DIV which is used in all the pages of my wordpress site. We can call it the parent DIV here. And I also have a child div inside it. The parent DIV is set to 1170px width. And the child DIV is set to 100%. So, its taking the full width of parent DIV naturally. But I want my child DIV to go full screen without getting affected by the width of parent DIV. To make my child DIV go full screen, the most simple ways were to take the child DIV out of parent DIV or to make the parent width go 100%. But I can't do both. It has to be where they are and also since the parent DIV is used in nearly all the pages I can't change its width to 100% in the stylesheet. Is there anyway how I can get my child DIV go full screen without getting affected by the parent DIV?

.container {
    width: 1170px;
}

.child {
 width: 100%;
}
  • Please share your HTML and CSS. – Koby Douek Mar 06 '17 at 09:48
  • Come on, you've been a member for nearly a year and you still don't know how to ask a question? I think you should take a tour of the help centre and remind yourself – Pete Mar 06 '17 at 09:50
  • updated code.. i went bzy somewhere so it took time... got downvoted so fast.. –  Mar 06 '17 at 10:02

2 Answers2

1

Make child div's position fixed:

child-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;//Optional
}
K K
  • 17,794
  • 4
  • 30
  • 39
0

i believe you will find the answer here 

.child-div {
position:absolute;
left:0;
right:0;

}

Answer took from this post

Is there are way to make a child DIV's width wider than the parent DIV using CSS?

Community
  • 1
  • 1