Question

How do I remove the whitespace found at website.com underneath the elements div is like 730 px of whitespace. I’ve been fiddling around with my css code for over an hour now. I can’t seem to isolate the problem

HTML:

<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>

<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>

CSS:

div.element img:nth-of-type(1){
    padding-top:80px;
}
div.element div:not(:nth-of-type(1)){
    position:relative;
    width:auto;
    height:auto;
    bottom:375px;


}

div.element img{
    position:relative;
    right:198px;
    padding-right:56px;
    border:none;

}
.Projecttitle{
    text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 22px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
padding-top:15px;

}
#Projecttitle{
    position:relative;
    bottom:162px;
    width:410px;
    height:155px;
    left:226px;
}
.Projectdescription{
    text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 17px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;


}
#Projectdescription{
    position:relative;
    bottom:290px;
    width:410px;
    height:155px;
    left:226px;
    z-index:0;
}

Answer 1

First of all, you have an unclosed div tag. the second div.element is nested inside of the first one, when they are obviously supposed to be siblings. When you fix this, the problem will become more obvious. You are also using way too much relative positioning. This confuses the issue more because the appearance of the element on screen changes, but the space it ‘occupies’ in the document flow does not.