CODEWITHSUNDEEP
css
sql_dummy
sql_dummy

Reputation: 745

Ideal way to set layout where the main content overlaps header and footer?

What is the ideal way to set this layout where the main contetnt overlaps header and footer? I could achieve it by setting section 2 position absolute and container position relative. The issue I am having is container size is not increasing with respect to height of section 2.

html

<div class="contaier">
     <div class="section-1">...<div>
     <div class="section-2">...<div>
     <div class="section-3">...<div>
<div>

css

html{
height:100%
}
body{
min-height:100%;
}
.container{
min-height:100%;
position:relative;
}

.section-1{
min-height:35%;
background-color: #1B80CE;

}
.section-2{
height:400px;
width:80%;
margin-left:10%;
position:absolute;
background-color: white;

}
.section-3{
min-height:65%;
background-color: #E8EBF0;
}

layout

Upvotes: 0

Views: 50

Answers (3)

sql_dummy
sql_dummy

Reputation: 745

<!DOCTYPE html>
<html>
<head>
<style>
body{
  margin: 0;
}
.container{
  height:100vh;
}    
.section-1{
  height:25vh;
  background-color: #1B80CE;    
}
.section-2{
  height:67.5vh;
  width:80%;
  margin-left:10%;
  margin-top:-12.5vh;
  position: absolute;
  background-color: white;
}
.section-3{
  height:75vh;
  position: relative;
  background-color: #E8EBF0;
}
</style>
</head>
<body>

<div class="container">
    <div class="section-1">...</div>
   <div class="section-3">
     
     <div class="section-2">...</div>
   </div>
</div>

</body>
</html>

Upvotes: 0

Rizeen
Rizeen

Reputation: 1342

Try this:

body{
  margin: 0;
}
.container{
  height:100vh;
}    
.section-1{
  height:25vh;
  background-color: #1B80CE;    
}
.section-2{
  height:67.5vh;
  width:80%;
  margin-left:10%;
  margin-top:-12.5vh;
  background-color: white;
}
.section-3{
  height:100vh;
  background-color: #E8EBF0;
}
<div class="container">
   <div class="section-3">
     <div class="section-1">...</div>
     <div class="section-2">...</div>
   </div>
</div>

Upvotes: 2

samuellawrentz
samuellawrentz

Reputation: 1732

You can try position relative to the section-2 and then use the top property to make it overlay on the header.

Or

.section-2 {
  background: blue;
  min-height: 400px;
  width: 80%;
  margin: -30px auto;
}

You can use a negative top margin to pull the container up and use auto for the left and right margins to center the container.

.section-1 {
  background: wheat;
  height: 100px;
}

.section-2 {
  background: blue;
  min-height: 200px;
  width: 80%;
  margin: -30px auto 0;
}
.section-3 {
  background: green;
  height: 40px;
}
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>

Upvotes: 2

Related Questions