CODEWITHSUNDEEP
htmlcsssassstyles
Maxwell s.c
Maxwell s.c

Reputation: 1668

Div leak parent container max width

I need to make a child div leak the parent container max width. Now, i can only leak parent padding (knowing it).

I need this to wrap all the page on a container and make some sections leak.

Without this, i will need to set the container on every section.

Here is some snippets

Better snippet on codepen

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 30px;
  background: lightblue;
}

.child {
  background: lightcoral;
  height: 200px;
}

.child.cancel-padding {
  margin: 0 -30px;
}

.child.leaked {
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  text-align: center;
  font-family: sans-serif;
}
<small>note: see in fullscreen or on codepen</small>
<h1>what i have</h1>
<div class="container">
  <div class="child">A element inside a container</div>
</div>

<h1>what i need</h1>
<div class="container-leaked">
  <div class="child leaked">
    a element inside the container, but leaking all view width (100vw)
  </div>
</div>

<h1>what i can do now</h1>
<div class="container">
  <div class="child cancel-padding">Make the element cancel the parent padding, that's all</div>
</div>

<h1>Why i need</h1>
<p>
  i will wrap all the page in the container, but sometimes i need sections to leak the container with full view width.
</p>

Note: on the demo, i've set the child height, but i will not have control of it. it's a dynamic content div, so height is dynamic.

Upvotes: 0

Views: 2008

Answers (3)

Richard Casetta
Richard Casetta

Reputation: 446

You can do it by using relative positioning. Indeed, you need position: relative on your container and your child -leak. Then, to center your child, you use

left: 50%;
transform: translateX(-50%);

This works because your container is centered. So left: 50% will move the child left edge to 50% of its parent width from its initial position (which mean the center of its parent). Then, transform: translateX(-50%) will move the left edge of your child 50% of its width on the left. You then just need to add width: 100vw to make your child full width. Here is the snippet: 

.page {
  position: relative;
}

.container {
  max-width: 100px;
  margin: 0 auto;
  padding: 0 30px;
  background: lightblue;
  position: relative;
}

.child-leak {
  height: 200px;
  background: lightcoral;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  width: 100vw;
}


html, body{
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
}
<div class="page">
  <h1>My title</h1>
  <div class="container">
    <div class="child-leak">
      My full width child
    </div>
  </div>
  <div>Below content</div>
</div>

This technique for horizontally center an element works also for vertical centering. This works because a value in % for top, left, right and bottom refers to the first non static parent width and height. On the other hand, translate with a value in % use the element width and height.

Upvotes: 1

Rob
Rob

Reputation: 118

This may be a little bit of a hack, but I've done it before by adding ::before and ::after. Add position: relative to the .child and then add the following css

.child.leaked:before{
  content:"";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: -100%;
  background-color: red;
  top: 0;
}

.child.leaked:after{
  content:"";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  right: -100%;
  background-color: red;
  top: 0;
}

Upvotes: 1

sol
sol

Reputation: 22949

Here is an approach you can try:

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 30px;
  background: lightblue;
}

.child {
  background: lightcoral;
  height: 200px;
  width: 400%;
  margin-left: -150%; /* (width of child - 100) / 2 */
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* prevent horizontal scroll bar */
}

* {
  text-align: center;
  font-family: sans-serif;
}
<div class="container">
  <div class="child">I am outside the parent</div>
</div>

Upvotes: 0

Related Questions