Button won't fit in div container

Get Help CSS
,
#1

Hi,

I made a div that shows a picture with text next to it, and I’m trying to add a button that will lead to a page on the website. So far, I’ve tried putting a button in the div, but it doesn’t position right. I’m not sure how to fix this.

Any advice?

<div class="monthbook">
<div class="featuredbook">
  <a href="http://home.com"><img src="photos/bookcover/bookphto.jpg"></a></div>
  <div class="featuredtext">
  <h1>Book of the month</h1>
  <h2>booktitle</h2>
  <p>"The book flows so well!" - REVIEWER <br> <br> "I could not put it down!" - REVIEWER <br> <br> An easly flowing story with a great narrative! - REVIEWER</p>
</div>
<div button class="monthbook-button">Read more</button> </div>
</div>
</div>


.monthbook{
  height: 400px;
  width: 100%;
  margin-top: 5%;
  background: radial-gradient(rgb(224, 222, 222), white);
  box-shadow: #737272 1px 2px 5px 1px;

}


.monthbook-button {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  display: block;
 
  cursor: pointer;
  border: black 1px solid;
  background-color: rgba(250, 245, 245, 0.97);
  text-transform: uppercase;
  font-weight: bold;
  -webkit-transition:  ease 0.2s;
  transition:  ease 0.2s;
  margin-left: 80%;
  background-color: red;

}
  



.monthbook-button:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: 0.2s ease-in-out;
background: rgb(50, 49, 49);
color: white;


}

  .featuredbook{
    float: left;
    width: 210px;
    height: 340px;
    margin-left: 23%;
    margin-top: 3%;
    
  }
  
  .featuredbook img{
    width: 210px;
    height: 340px;
    cursor: pointer;
  
  }


.featuredtext{
float: right;
 width: 40%;
 margin-right: 19%;
 margin-top: 3%;
 height: 100%;

}

.featuredtext h1{
 font-size: 30px;
 text-transform: uppercase;
 font-family:Impact, Haettenschweiler, 'Arial Narrow light', sans-serif;
 letter-spacing: 2px;
 word-spacing: 2px;
 margin-top: 0%;
 margin-bottom: 3%;
 text-align: center;
 width: 100%;
 
}
 
 .featuredtext h2{
  font-size: 23px;
  text-transform: uppercase;
  font-family:'poppins';
  margin-top: 2%;
  text-align: center;
  width: 100%;
  
 }
 .featuredtext p{
  font-size: 15px;
  margin-top: 5%;
  width: 85%;
  margin-left: 45px;
  text-align: left;
 
  
  
 }
#2

I’m pretty sure <button> is it’s own tag and not an attribute of the <div> tag, so I think you need to write it like <div><button class='monthbook-button'>Read more</button></div>.

#3

That did the trick, thank you! :slight_smile: