Question 42961 in Html Question posted in
Some basic documentation can be found here.

Extend div beyond parent in one direction to edge of browser – Html

I need to extend a div beyond the parent, only to the right and all the way to the edge of the browser.

The code below shows it working with a percentage width (60%), but change the max-width to something like 360 (something smaller than what the percentage would give you) and it fails.

I’m ok with using JS if necessary but css only is obviously preferred.

Thanks!

body {
  margin: 0;
  padding: 0;
  color: white;
  background: grey;
}

.container {}

.center {
  width: 60%;
  max-width: 3600px;
  margin: 0 auto;
  background: red;
}

.image-container {
  width: 80vw;
  height: 300px;
  background-image: url("https://picsum.photos/1200/400");
  object-fit: cover;
}
<div class="container">
  <div class="center">
    <p>Banner image snould start where the text starts and extend beyond the parent container all the way to the edge of the browser.</p>
    <p>Width set to 60%.</p>
    <p>Change the max-width and it no longer works.</p>
    <div class="image-container"></div>
    <p>More content after that stuff above.</p>
    <p>More content after that stuff above.</p>
    <p>More content after that stuff above.</p>
  </div>
</div>

This is what it should look like:
This is what it should look like

Tags:

3

Answers


  1. 0

    I had to do this recently, I provide you the code of a simple example only using CSS if it helps you.

    /* Test it in mobile so you can see the effect */
html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.page-container {
  padding: 20px;
  background: pink;
  width: 100%;
}

.card-container {
    background: #99ffcc;
    display: flex;
    gap: 5px;
    min-height: 130px;
    /* These rules are the important ones. This will not overflow the page because it has the overflow: auto that adds the scroll and hide the overflowed part. */
    overflow: auto;
   /* All the next 20px have to be equal to the padding of the parent */
    width: calc(100vw - 20px); 
    margin-right: -20px;
    padding-right: 20px; /* With this you compensate for the loss of space when you get to see the last item */
  /*  All of the above overflows only on the right, if you want to overflow on both sides the width would be 100vw and add margin-left: -20px; and add padding-left: 20px;  */
}

a {
    width: 96px;
    height: 96px;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    box-shadow: 0px 4px 8px rgb(96 97 112);
    flex-shrink: 0;
}

p {
    background: lightblue;
}
    <div class="page-container">
  <div class="card-container">
    <a href="#">Card 1</a>
    <a href="#">Card 2</a>
    <a href="#">Card 3</a>
    <a href="#">Card 4</a>
    <a href="#">Card 5</a>
    <a href="#">Card 6</a>
    <a href="#">Card 7</a>
    <a href="#">Card 8</a>
    <a href="#">Card 9</a>
    <a href="#">Card 10</a>
    <a href="#">Card 11</a>
    <a href="#">Card 12</a>
  </div>
  <p>some text below slider. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus alias soluta maxime dolores nulla cumque incidunt ex optio, quis dicta molestias accusantium recusandae quae sint voluptas officiis numquam. Ab, obcaecati.
  Id modi ex magni, nihil exercitationem unde minus laboriosam porro dicta, tenetur officiis cumque accusantium distinctio quasi placeat atque. Deleniti totam ullam aliquam enim eveniet. Soluta accusantium commodi incidunt non.
  Omnis ex placeat magnam tempore eligendi praesentium inventore consequatur nulla iure obcaecati, quo illum! Eligendi nisi, hic minus, porro vitae cumque asperiores voluptatem sed dolores odio facilis accusamus perferendis. Reprehenderit.
  Quae deserunt, hic error maxime, laudantium provident laboriosam non dicta sunt laborum rerum ducimus placeat beatae tenetur quibusdam ipsa quaerat, corporis neque! Vel corrupti sunt voluptas voluptatibus unde eligendi dolore!
  Deleniti saepe velit dolores distinctio. Nihil ea dolores nulla corporis adipisci debitis quia quas minima harum corrupti porro dolor, eveniet provident veniam dolorum similique repellendus velit earum hic ducimus tenetur?</p>
</div>

    In this case I extended and overflowed to the right everything that is inside the .card-container element

    Login or Signup to reply.
  2. 0

    Simply add the following to your CSS:

    .container {
    width: 100%;
    overflow: hidden;
}
    Login or Signup to reply.
  3. 0

    The issue with this code is that the container div, the parent of the center div, has no specified width. This means the center div takes up 100% of the container’s width.

    To achieve the desired effect of extending the center div beyond the parent container to the right edge of the browser, you can try using the "position" property with "left" and "right" values to position the center div outside of the container div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search