CODEWITHSUNDEEP
htmlcss
seriously
seriously

Reputation: 1367

element getting out of bound of parent container

I have a main container named shelf2 and inside it, there are 2 sub-containers named dynamicShelf2Items and rightAdCon. The problem I have is I set shelf2 to have a height of auto so it responds to the height of the containers inside it but currently, shelf2's height is being responsive to that of dynamicShelf2Items but rightAdCon is not getting into consideration so rightAdCon ends up getting out of bounding of shelf2. How can I make shelf2's height respond to all elements inside it and take the height of the highest parent element inside it? So in this case rightAdCon has a larger height than dynamicShelf2Items so shelf2 should be responsive to that height therefore rightAdConwon't get out of bound.

.shelf2 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: pink;
}

.shelf2 .dynamicShelf2Items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 4%;
  left: 18%;
  width: 64%;
}

.shelf2 .dynamicShelf2Items .dynamicData {
  position: relative;
  width: 100%;
  height: 13em;
  cursor: pointer;
}

.shelf2 .dynamicShelf2Items .dynamicData .dynamicDataHoverHighlight {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.2%;
  height: 13em;
  background-color: rgb(3, 149, 3);
}

.shelf2 .dynamicShelf2Items .dynamicData .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  left: 1.5%;
  width: 30%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData img {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -100%;
  left: 32%;
  width: 62%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 p {
  position: absolute;
  left: 0%;
  font-size: 1.3vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 100%;
  height: 30%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 p {
  position: absolute;
  left: 0%;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .rightAdCon {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  row-gap: none;
  position: absolute;
  top: 0%;
  right: 1%;
  width: 15%;
  height: 200rem;
  overflow: hidden;
  padding-top: 5%;
  background-color: red;
}

.shelf2 .rightAdCon .adCon {
  height: 25%;
}

.shelf2 .rightAdCon .adCon video {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf2">
  <div class="dynamicShelf2Items">
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div class="level2">
          <p>Apple · Mac · Grey</p>
        </div>
        <div class="level3">
          <p>US $1,999</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
  </div>
  <div class="rightAdCon">
    <div class="adCon">
      <video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
  </div>
</div>

Upvotes: 0

Views: 110

Answers (2)

Laisender
Laisender

Reputation: 734

Soo. spent some time fixing your code. Please read carefully how I positioned the elements and what to use for that.

You will see that only 10% of the amount of css was actually needed to build this site. Don't use CSS attributes you don't understand.

One big mistake of yours was to use position: absolute;. This is not something you should be sloppy with. Back in 1999 this was maybe a thing but today, position:absolute; is only used in rare cases of overlapping content and advanced topics of css. Avoid it.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background-color: #eee;
}
.wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  grid-template-columns: 1fr 0.2fr;
  width: 100%;
  background-color: pink
}

.big-font {
  font-size: 1.2rem;
  font-weight: bold;
}

.products {
  display: grid;
  padding: 1rem;
  grid-gap: 4rem;
}

.product {
  display: grid;
  grid-template-columns: auto 1fr;
}

.product img {
  margin-right: 1rem;
  width: 300px;
  border-radius: 1rem;
}

.product .detailsCon {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.product .detailsCon > * {
  margin-bottom: 1rem;
}

.ads {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

video {
 width: 100%;
}
<div class="wrapper">
  <div class="products">
    <div class="product">
       <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div class="product">
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div class="detailsCon">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p class="big-font">US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
  </div>
  <div class="ads">
    <div class="adCon">
      <video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
  </div>
</div>

Upvotes: 1

taso
taso

Reputation: 1

Hmm.. .shelf2 has an absolute position. I'd put .shelf2 .dynamicShelf2Items into a grid and define the grid columns to be certain width (https://css-tricks.com/snippets/css/complete-guide-grid/).. You can use percentages or px. Inside each grid you can use flex if that's better for those child elements. Should not have any problems with height.

Upvotes: 0

Related Questions