0

I have been trying to make a page which has 3 horizontal sections, with content in the middle section that overlaps the sections above and below it. The content in the middle section is arranged using flex.

I attempted to set the position of the mid section content 100px above and using calc to set the height of the content to be 100% - 200px but not getting the desired effect.

This is what I am trying for:

enter image description here

And this is the HTML/CSS I am using:

* {
 margin: 0px;
 padding: 0px;
}
.sectionClass {
 min-height: 300px;
}
#section01 {
 background-color: aquamarine;
 height: 300px;
}
#section02 {
 background-color: brown;
}
#section03 {
 background-color: purple;
 height: 300px;
}
#mainContainer {
 position: relative;
 top: -100px;
 height: calc(100% - 200px);
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-evenly;
}
.sectionItem {
 max-width: calc(100% / 6);
 margin: 10px;
 border: 1px solid #222;
}
.sectionItem p {
 font-size: 14px;
}
<body>
 <div id="section01" class="sectionClass"></div>
 <div id="section02" class="sectionClass">
 <div id="mainContainer">
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
 </div>
 </div>
 </div>
 <div id="section03" class="sectionClass"></div>
</body>

Can anyone suggest where I am going wrong?

Thanks in advance.x

This is what I am getting:

enter image description here

James Ashok
4201 gold badge2 silver badges10 bronze badges
asked Apr 2, 2024 at 11:10
2
  • Not sure why calc would get involved here to begin with, are there additional restrictions you did not explicitly mention? Like, all three sections together should not exceed the viewport height? So far; I think your approach of trying to do anything with the main container, should probably be replaced with a negative margin-top and -bottom on the 2nd section. Commented Apr 2, 2024 at 11:24
  • When you say "overlap", will sections 1 and 3 have any content of their own, or are they purely to provide space around section 2? Commented Apr 2, 2024 at 23:12

3 Answers 3

1

I used grid instead of flexbox for this exemple but you can do what you want with a absolute ::after. Like this

:root {
 --card-width: 200px;
 --card-height: 300px;
}
.cardparent {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
 grid-template-rows: repeat(5, var(--card-height));
 gap: 10px;
 position: relative;
}
.cardparent::after {
 content: " ";
 display: block;
 position: absolute;
 width: 100%;
 height: calc(100% - var(--card-height));
 top: calc(var(--card-height) / 2);
 left: 0;
 background-color: rgba(30, 66, 13, 0.5);
}
.card {
 background-color: #0D2840;
 z-index: 1;
}
/* 
For this snippet only 
*/
body {
 padding: 0;
 margin: 0;
}
h1 {
 margin: 0
}
section {
 min-height: 50dvh;
}
#sec1 {
 background-color: #DCE8F2;
}
#sec2 {
 background-color: #80A2BF;
 padding: 20px;
}
#sec3 {
 background-color: #54728C;
}
<section id="sec1">
 <h1>Section 1</h1>
</section>
<section id="sec2" class="cardparent">
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
 <div class="card"></div>
</section>
<section id="sec3">
 <h1>Section 3</h1>
</section>

answered Apr 2, 2024 at 12:02
Sign up to request clarification or add additional context in comments.

Comments

0

What about a gradient background?

* {
 margin: 0px;
 padding: 0px;
}
.sectionClass {
 min-height: 300px;
}
#section01 {
 background-color: aquamarine;
 height: 300px;
}
#section02 {
 background: linear-gradient(180deg, aquamarine 15%, brown 15%, brown 85%, purple 85%);
}
#section03 {
 background-color: purple;
 height: 300px;
}
#mainContainer {
 padding: 1em;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 gap: 1em;
}
.sectionItem {
 border: 1px solid #222;
 padding: 10px;
}
.sectionItem p {
 font-size: 14px;
}
<body>
 <div id="section01" class="sectionClass"></div>
 <div id="section02" class="sectionClass">
 <div id="mainContainer">
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 <div class="sectionItem">
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
 </div>
 </div>
 </div>
 <div id="section03" class="sectionClass"></div>
</body>

answered Apr 2, 2024 at 23:09

Comments

-1

Try removing the

#section03{
 background-color: purple;
 height: 300px; <-
}

if this doesnt work , try adding a overflow:hidden in section03 , or you can try with section 2 , but to make it with margins- , if that doesnt help feel free to email me.

answered Apr 2, 2024 at 11:29

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.