OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

CSS Absolute Positioned Element Overflowing Section Boundaries

  • Thread starter Thread starter gggggggggggggg
  • Start date Start date
G

gggggggggggggg

Guest
I'm working on a custom section in my website where I need to position a blue background element within a section. However, I'm encountering an issue where the blue background component overflows the section and affects the layout of subsequent sections.

Here is the relevant part of my HTML and CSS:


Code:
<style>
  body {
    margin: 0;
  }
  
  .custom-section {
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden; /* Prevent overflow */
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    border: 2px dashed red;
    left: 75px;
    top: 110px;
    overflow: hidden;
    max-width: 1440px;
  }
  
  .custom-section .text-section {
    width: 520px;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px dashed blue;
  }
  
  .custom-section .title-container h2 {
    font-family: 'ITC Garamond Std';
    font-size: 64px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: -2px;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  
  .custom-section .text-container {
    font-family: 'iCiel Internacional', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    width: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .custom-section .spacer {
    flex: 1;
    border: 2px dashed green;
  }
  
  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 550px;
    display: flex;
    gap: 30px;
    border: 2px dashed purple;
    overflow: hidden;
  }
  
  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }
  
  .circular span {
    font: 14px Inter;
    height: 80px;
    position: absolute;
    left: 75px;
    transform-origin: bottom center;
    line-height: 16.94px;
  }
  
  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    left: -10px;
  }

  @keyframes rotateText {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .circular {
    width: 160px;
    height: 160px;
    border: 2px dashed yellow;
    position: relative;
    animation: rotateText 10s linear infinite;
  }

  .blue-background {
    width: 1311px;
    height: 590px;
    left: 300px;
    background-color: blue;
    position: relative;
    opacity: 0.15;
    transform: rotate(30deg);
  }
</style>

<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      <div class="title-container">
        <h2>{{ section.settings.heading }}</h2>
      </div>
      <div class="text-container">
        <p>{{ section.settings.content }}</p>
      </div>
      <div class="spacer"></div>
      <h1 class="circular">
        {{ section.settings.circular_content }}
      </h1>
    </div>
    <div class="images-wrapper">
      <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
      <img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
      <img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
    </div>
  </div>
  <div class="blue-background"></div>
</section>

I want the blue background to be contained within the section, but it currently overflows and impacts the layout of the next section. How can I adjust the CSS to ensure that the blue background stays within the bounds of the custom section?

This is how it looks now:

This is how it looks now

This is how it should look like:

This is how it should look like

And these are the props that are given in the Figma file:

Code:
    width: 1311px;
    height: 590px;
    top: 1291px;
    left: 1585px;
    gap: 0px;
    opacity: 0.15px;
    angle: 180 deg;

These props are for the container that it is marked on the second image.

<p>I'm working on a custom section in my website where I need to position a blue background element within a section. However, I'm encountering an issue where the blue background component overflows the section and affects the layout of subsequent sections.</p>
<p>Here is the relevant part of my HTML and CSS:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><style>
body {
margin: 0;
}

.custom-section {
background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
position: relative;
width: 100%;
height: 650px;
overflow: hidden; /* Prevent overflow */
}

.custom-section .container-wrapper {
position: relative;
width: 1510px;
height: 430px;
border: 2px dashed red;
left: 75px;
top: 110px;
overflow: hidden;
max-width: 1440px;
}

.custom-section .text-section {
width: 520px;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px dashed blue;
}

.custom-section .title-container h2 {
font-family: 'ITC Garamond Std';
font-size: 64px;
font-weight: 300;
line-height: 70px;
letter-spacing: -2px;
text-align: left;
margin: 0;
padding: 0;
}

.custom-section .text-container {
font-family: 'iCiel Internacional', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: left;
width: 60%;
margin-bottom: 0;
padding-bottom: 0;
}

.custom-section .spacer {
flex: 1;
border: 2px dashed green;
}

.custom-section .images-wrapper {
width: 960px;
height: 430px;
position: absolute;
left: 550px;
display: flex;
gap: 30px;
border: 2px dashed purple;
overflow: hidden;
}

.custom-section .images-wrapper img {
width: 300px;
height: 430px;
}

.circular span {
font: 14px Inter;
height: 80px;
position: absolute;
left: 75px;
transform-origin: bottom center;
line-height: 16.94px;
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
left: -10px;
}

@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
animation: rotateText 10s linear infinite;
}

.blue-background {
width: 1311px;
height: 590px;
left: 300px;
background-color: blue;
position: relative;
opacity: 0.15;
transform: rotate(30deg);
}
</style>

<section class="custom-section">
<div class="container-wrapper">
<div class="text-section">
<div class="title-container">
<h2>{{ section.settings.heading }}</h2>
</div>
<div class="text-container">
<p>{{ section.settings.content }}</p>
</div>
<div class="spacer"></div>
<h1 class="circular">
{{ section.settings.circular_content }}
</h1>
</div>
<div class="images-wrapper">
<img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
<img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
<img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
</div>
</div>
<div class="blue-background"></div>
</section></code></pre>
</div>
</div>
</p>
<p>I want the blue background to be contained within the section, but it currently overflows and impacts the layout of the next section. How can I adjust the CSS to ensure that the blue background stays within the bounds of the custom section?</p>
<p>This is how it looks now:</p>
<p><a href="https://i.sstatic.net/Yj3A75gx.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Yj3A75gx.png" alt="This is how it looks now" /></a></p>
<p>This is how it should look like:</p>
<p><a href="https://i.sstatic.net/7oUpoKae.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7oUpoKae.png" alt="This is how it should look like" /></a></p>
<p>And these are the props that are given in the Figma file:</p>
<pre><code>
width: 1311px;
height: 590px;
top: 1291px;
left: 1585px;
gap: 0px;
opacity: 0.15px;
angle: 180 deg;

</code></pre>
<p>These props are for the container that it is marked on the second image.</p>
 

Latest posts

Top