<div class="container">
<div class="top-section">
<img id="image1" />
<img id="image2" />
</div>
<div class="content">
...
</div>
<div class="bottom-section">
...
</div>
</div>
<style type="text/css">
.container {
margin-left: auto;
margin-right: auto;
margin-top: -8px;
width: 1024px;
height: 1500px;
background-color: #CCC;
border: 1px solid;
/*display: run-in;*/
/*position:fixed;*/
text-align: center;
}
.top-section {
background-color: #FFC;
/*margin: 0 auto;*/
height: 150px;
width: 1000px;
display: flex;
z-index: 10;
text-align:center;
vertical-align:middle;
position: fixed;
display:block;
}
#image1 {
position: relative;
width: 100%;
}
#image2{
position: relative;
z-index: 10;
}
I am looking to create a fixed width container with a top section that has two images centered both vertically and horizontally inside. The header should stay at the top of the page and contain the images overlapping each other.
To clarify, the container's width is fixed, the top section should be fixed at the top of the page (inside the container) with two images that overlap and are centered within the header both horizontally and vertically. I hope this explanation is clear now.