How a sub container can be larger in width than the main one on top of the html hierarchy

Question

I want to style a sub container and make it larger in width than the main one on top of the html structure that force not to exceed the width set for the first container. Which css property should i use for this case? thank you

I tried using max-width property but still not solving the problem

Have you tried setting fixed `width`? – Dave111 Jan 17 '23 at 10:18 — Dave111, Jan 17 '23 at 10:18

score 0 · Answer 1 · answered Jan 17 '23 at 11:52

On the content element use

margin-left: calc(A - B);

where

A = 1/2 width of the container

B = 1/2 width of the content

Follow a code Example of 3 nested content of different dimensions. HTML:

<div class="page-wrapper">
      <div class="container container 1">
        <p>Container 1 - width: 600px</p>
        <div class="content content-1">Content 1: width: 800px</div>
      </div>
    </div>
    <div class="page-wrapper">
      <div class="container container 2">
        <p>Container 2</p>
        <div class="content content-2">Content 2 - width: 160%</div>
      </div>
    </div>
    <div class="page-wrapper">
      <div class="container container 3">
        <p>Container 3</p>
        <div class="content content-3">Content 3 - width: 1024px</div>
      </div>
    </div>

Code example CSS:

.page-wrapper {
  width: 1024px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #000000;
  padding: 20px 0;
}

.container {
  width: 600px;
  height: 300px;
  background: #FF0066;
  text-align: center;
}

.content {
  height: 200px;
  background-color: #666666;
  box-sizing: border-box;
  max-width: 100vw; /* do not exceed the viewport width; */
}

.content-1 {
  width: 800px;
  margin-left: calc(50% - 400px); /* this center the content */
}
  
.content-2 {
  width: 160%;
  margin-left: calc(50% - 80%); /* this center the content */
}
  
.content-3 {
  width: 1024px;
  margin-left: calc(50% - 512px); /* this center the content */
}

The working codepen here: https://codepen.io/Davevvave/pen/XWBepBM

Thanks for answering my post was helpful, i figure out the right way to style the child section of a parent container right here in this link for anyone who wants more options in this case https://stackoverflow.com/questions/48817028/how-to-make-full-width-div-inside-container — , Jan 17 '23 at 16:42

How a sub container can be larger in width than the main one on top of the html hierarchy

1 Answers1