Why is there a huge gap at the bottom of my code?


#1

I’m having a difficult time formatting a journal skin for DeviantArt and I’m wondering if anyone might know why and be able to explain it to me. At the bottom of the journal skin I created, you will notice a huge gap after the background image ends. That gap isn’t supposed to be there

I’m not really sure why there is a gap. I divided the text area sections into classes and adjusted their positioning. The bottom text box used to be where the gap is but since I moved the text box shouldn’t that big gap disappear?

If anyone could help me figure out what I did wrong here I would be so grateful. Thank you so much in advance!

```

Here is the HTML

<div class="background">

<h1 class="title">HerPersona Journal</h1>

<div class="sect1">
<h1 class="first-header">Updates | 08/26/2017</h1>
<p class="first-paragraph">text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text
</p>
</div>

<div class="sect2">
<h1 class="second-header">Art Status</h1>
<p class="second-paragraph">text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
</div>
</div>

<div class="sect3">
<h1 class="third-header">Art Feature</h1>
<p class="third-paragraph">text text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text texttext text text text text</p>
</div>


**

Here is the CSS

**

/* This is the background image of my journal skin */

.background{
  background: url("https://i.imgur.com/WroWFKD.jpg") no-repeat top center;
  background-size: cover;
}

h1.title {
  text-align: center;
  color: #fff;
  font-family: "Lobster";
  font-size: 70px;
}

/* This is the first text box */

.sect1 {
  background-color: rgba(0,0,0,0.7);
  border: dotted 1px #fff;
  position: relative;
  left: 50px;
  max-width: 250px;
  padding: 5px 20px;
}

h1.first-header {
  text-align: center;
  color: lightblue;
  font-family: "Lobster";
  font-weight: 100;
}

.first-paragraph {
  color: #FFFFFF;
  font-size: 11px;
  max-height:300px;
  overflow: auto;
}

/* This is the second text box */

.sect2 {
  background-color: rgba(0,0,0,0.7);
  border: dotted 1px #fff;
  position: relative;
  left: 385px;
  bottom: 440px;
  max-width: 250px;
  display: inline-block;
  padding: 5px 20px;
}

h1.second-header {
  text-align: center;
  font-family: "Lobster";
  color: lightblue;
  font-weight: 100;
}

p.second-paragraph {
  color: #FFFFFF;
  font-size: 11px;
  max-height:300px;
  max-width:350px;
  overflow: auto;
}

/* This is the third text box */

.sect3 {
  background-color: rgba(0,0,0,0.7);
  border: dotted 1px #fff;
  position: relative;
  left: 50px;
  bottom: 400px;
  display: inline-block;
  padding: 10px 20px;
}

h1.third-header {
  text-align: center;
  font-family: "Lobster";
  color: lightblue;
  font-weight: 100;
}

p.third-paragraph {
  color: #FFFFFF;
  font-size: 11px;
  max-height:200px;
  max-width:585px;
  overflow: auto;
}

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.