Position Div below absolute positioned image

html css position absolute

10,440

You can do as make the div style to below that contains all the 'about' sections.

height: 100%;
margin-top: 50px;
position: absolute;
top: 100%;
width: 99%;

This will make the div start exactly after where the image ends. This would resolve your issue.

10,440

Author by

mattmuirhead

Updated on June 04, 2022

Comments

mattmuirhead almost 2 years

I'm creating a website for a friend. However I want to position a div containing 4 sections underneath an image absolute positioned. This has to be the case as I want it to resize with the change in window size without using any javascript. Can anyone think of a way to do this.

Heres the page:

https://dl.dropboxusercontent.com/u/24713212/0001_Adam_Plowdem_Videography/html/index.html

Basically I want the brightly coloured sections to start right after the image whatever the browser size.

Really appreciate any help, thanks,

Matt

<style>

body{
width: 99%;
height: 1050px;
background-color: #FFF;
font: 80%/1.65 "Open Sans", sans-serif;
}

#header{
width: 100%;
height: 50px;
position: fixed;
top:0;
left:0;
background-color: #FFF;
    /* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EBE8E4));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EBE8E4 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #EBE8E4 100%);
border-bottom: 1px solid rgba(0,0,0,0.4);
}

#nav{
width: 600px;
position: absolute;
top: 0;
right:0;
height: 50px;
margin-right: 20px;

}

#nav ul{
list-style: none;
height: 50px;
position: absolute;
top: 0;
margin: 0;
display: block;
right:0 !important;
}

#nav li{
display: inline-block;
height: 50px;
border-bottom: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#nav li a{
display: block;
height: 50px;
padding-top: 16px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px !important;
border-bottom: none;
color: #000;
text-decoration: none;
/*text-transform: uppercase;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#nav a:hover{
color: #000;
background: rgba(0,0,0,0.1);
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
}

.banner {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/adam.jpg) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-2;
border-bottom: 1px solid rgba(0,0,0,0.4);
-webkit-box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
box-shadow: rgba(200,200,200,0.9) 0 4px 10px -1px;
/*position: relative;
margin-top: -60px;*/
}

.overlay {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
background: url(img/overlay.png) center center;
background-size: cover;
position:absolute;
top:50;
left:0;
z-index:-1;
border-bottom: 1px solid rgba(0,0,0,0.4);
/*position: relative;
margin-top: -60px;*/
}


.about {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: red;
display: block;
}

.about2 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: blue;
display: block;
}

.about3 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: yellow;
display: block;
}

.about4 {
min-height: 170px;
padding: 30px 20px 30px 20px;
text-align: center;
background: green;
display: block;
}

#container{
background-color: red;
margin: auto;
padding: 0;
width: 1000px;
height: 70%;
}


</style>

<html>

<head>
</head>

<body>

<!-- Start Navigation -->
<div id="header">
    <div id="nav">
        <ul>
            <li><a href="#">about</a></li>
            <li><a href="#">work</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul></div>
</div>
<!-- End Navigation -->

<!-- Start Main Image -->

<section class="banner" style="height: 100%;">
</section>

<!-- End Main Image -->
<div style="width: 99%;
height: 100%;">
<section class="about">
  <h5>Hello World</h5>
</section>
<section class="about2">
  <h5>Hello World</h5>
</section>
<section class="about3">
  <h5>Hello World</h5>
</section>
<section class="about4">
  <h5>Hello World</h5>
</section>
</div>
</body>

</html>