CODEWITHSUNDEEP
css
drake035
drake035

Reputation: 2897

Placing an element vertically between (and on top of) two other elements

Below the header element on top of my page I have a #container1 element with text content in it. I want to display a third #sub_header right between the two and on top, as shown on this mockup screenshot.

I could make #sub_header go on top of header by applying position:relative and a negative top margin to it. But I don't know how to have the upper part of the #container1 element "come" below #sub_header.

Any suggestion?

Upvotes: 0

Views: 33

Answers (1)

Gustaf Gunér
Gustaf Gunér

Reputation: 2267

Is it something like this you're looking for?

header{
    width: 100%;
    height: 200px;
    background-color: rgb(200,200,200);
}
#sub_header{
    width: 300px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 0;
    right: 0;
    margin: -50px auto 0;
}
#container1{
    width: 100%;
    height: 200px;
    background-color:rgb(220,220,220);
}
<header></header>
<div id="sub_header"></div>
<div id="container1"></div>

Upvotes: 2

Related Questions