Why does my right sidebar only go up halfway the screen? - html

Question

I'm trying to figure out why my right sidebar only goes half-way up the screen and what I'm doing wrong.
I have the HTML and CSS at the bottom and a picture of the website at the bottom. I'm trying to get the text in the middle but when I do that the text blocks the right sidebar from going all the way up. I have a picture of what it's supposed to look like at the bottom also. I could really use some help with this.
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
}
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
main {
clear: both;
}
aside {
width: 160px;
float: left;
}
section h2 {
margin-left: 0;
}
section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
section img {
float: left;
margin: 0;
padding: 0;
}
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="images/flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>

Answer 1

'#' usually stops a sidebar when you go to it. Only classes will work with this.
You also need to define everything. Style is not defined. No content is the <style> tags are defined either.
When you have a tag in html and want to define it with CSS then you do not put a '.' in front of the class as it is a tag not a class
<section>
<h2>20" Deranged Cat</h2>
<figure>
<picture>
<img src="images/cat1.jpg" alt="cat">
</picture>
<figcaption>This cat provides its own light and is perfect for a
backyard haunting.
Price 19.99</figcaption>
</figure>
</section>
<div id="right_sidenav">
<h5>Customers who bought this product also bought:</h5>
<ul>
<li>
<figure>
<picture>
<img src="flying_bats.jpg" alt="flying bat">
</picture>
<figcaption>
Flying bats
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/rat1.jpg" alt="rat">
</picture>
<figcaption>
16" Ugly rat
</figcaption>
</figure>
</li>
<li>
<figure>
<picture>
<img src="images/strobe1.jpg" alt="strobe light">
</picture>
<figcaption>
Mini strobe light
</figcaption>
</figure>
</li>
</ul>
</div>
/* right sidebar */
#right_sidenav {
width: 180px;
float: right;
background-color: #F5DEB3
padding: 0;
/* the styles for the section */
html {
background-image:url(../images/bats.gif);
background-repeat: repeat;
}
li {
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 800px;
background-color: white;
border: 5px solid black;
box-shadow: 5px 5px 5px 5px black;
margin: 0 auto;
}
section {
width: 600px;
float: right;
padding-right: 20px;
padding-left: 20px;
padding-bottom; 20px;
}
.main {
clear: both;
}
.aside {
width: 160px;
float: left;
}
.section h2 {
margin-left: 0;
}
.section figcaption {
float: right;
clear: right;
margin-left: 10em;
padding-right: 15em;
}
.section img {
float: left;
margin: 0;
padding: 0;
}