I have a webpage with links in the center and a div floated to the right, taking up about 25% of the screen. There is another div with
position: fixed, left: 0, bottom: 0HTML:
<div class="wrapper">
<div id="containerLeft">
<img id="ipad" src="images/ipad-small.png" alt="a picture of an ipad held in a hand" />
</div>
<div id="containerRight">
<article>
<p> stuff </p>
<p> more stuff </p>
</article>
</div>
</div>
CSS:
.wrapper{
width: 100%;
overflow: hidden;
}
/* ------------ Left Container Content - image ------------- */
#containerLeft{
width: 50%;
z-index:-9999;
overflow: hidden;
float: left;
}
#containerLeft img{
position: fixed;
left: 0;
bottom: 0;
display: block;
}
/* ---------- Right Container Content - copy on the side ---------------- */
#containerRight{
width: 25%;
float: right;
margin: 50px 3.854167% 0 0;
}
#containerRight article{
width: 100%;
}
#containerRight article p{
line-height: 140%;
font-weight: 400;
font-size: 0.45em;
text-align: right;
font-style: italic;
overflow: visible;
padding: 1%;
margin: 2% 0 0;
}
Can someone please help me identify what is causing this large gap at the bottom of the screen?