Question about CSS

[Alan Vende]

Question about the CSS

Right now, I have the padding of the the Book Note at the top of the TOC Div set to padding: 10px 5px 20px 10px;. I wanted to make them all 10px. so I put padding: 10px;, but they didn't look right.

Below is padding: 10px 5px 20px 10px;

Below is padding: 10px;

Last I knew, padding: 10px; is supposed to put 10px of padding for padding top, padding-right, padding-bottom, padding-left, but the second screenshot doesn't look like it did that--to me, the first screenshot does. It looks like it's 10px on the top, left, and right, but not the bottom. I don't see any reason why that should be. When it's coded correctly, it shouldn't behave like that, right?

Thank you for your help! This is alluding me--no matter if I change the way it's padded to 10px 10px 10px 10px, or keep the padding: 10px;, it still shows the same result as the second screenshot. I'm confused...

[Scott]

You are right it should work that way, however without seeing the rest of the code, not sure if something else is interfering? Like do you have the TOC Div set to specific height/width so it can't adjust to the changed padding?

[Alan Vende]

Oct 25, 2017 13:04:24 GMT -8 Scott said:

You are right it should work that way, however without seeing the rest of the code, not sure if something else is interfering? Like do you have the TOC Div set to specific height/width so it can't adjust to the changed padding?

I apologize, Scott. I was in a hurry when I posted this and forgot to post the rest.

The HTML is here:

SPOILER: Click to show

<!-- <style>
   ol.Stand-Alone-Books {
       list-style-type: numeric;
   }
   .button-panel .button {
       color: #000000;
   }
</style> -->

<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="Book-Note">
           <div align="center" style="padding-bottom: 5px;"><h3><strong>A Note About My Books</strong></h3></div>
           <p>Hello, $[current_user]! If you would like to buy a book straight from Amazon, please click the respective book's button below. If you would like to have a signed copy of any of the books below, please click on the respective button. Once you do, you will be redirected to my website where you can purchase the copy there, as Amazon does not sell signed copies.</p>
               <br />
               <p><em>All of my books are still being written. They will be added here as they are put up onto Amazon and my website.</em></p>
           </div>
           <hr />
       <div clsas="Solo-Books" style="float: left; padding-left: 5px;">
           <h3 class="Stand-Alone-Books-Header" style="padding-bottom: 5px;"><strong>Stand-alone Books</strong></h3>
           <ol class="Stand-Alone-Books">
               <li><p><em>Being Psychic for Beginners</em></p></li>
               <li><p><em>Best of Both Worlds</em></p></li>
               <li><p><em>College Life for the Physically Challenged</em></p></li>
               <li><p><em>The Other-side is Just Around the Corner</em></p></li>
               <li><p><em>Book about Psychic Children (to be named later.)</em></p></li>
               <li><p><em>Coming Out of the Spiritual Closet: A Journey of a Catholic to an Eclectic Witch</em></p></li>
               <li><p><em>My Video Game Journal</em></p></li>
               <li><p><em>My Zombie Journal</em></p></li>
               <li><p><em>Mission Critical</em></p></li>
               <li><p><em>Book about Atlantis</em></p></li>
               <li><p><em>Book about Reiki</em></p></li>
               <li><p><em>Cords: Living a Life Free of Fear-Based Attachment</em></p></li>
           </ol>
       </div>
           
       <div class="Series-Books" style="float: right; padding-right: 5px; padding-bottom: 5px;">
           <div>
               <h3 class="Series-Books-Header-Title" style="padding-bottom: 5px;"><strong>Series Books</strong></h3>
           </div>
           <h2 style="padding-bottom: 5px;"><strong><em>How the Archangels Can Help You</em></strong></h2>
           <ol>
               <li><p><em>Book 1: Ariel</em></p></li>
               <li><p><em>Book 2: Archangel Azrael</em></p></li>
               <li><p><em>Book 3: Archangel Chamuel</em></p></li>
               <li><p><em>Book 4: Archangel Gabriel</em></p></li>
               <li><p><em>Book 5: Archangel Haniel</em></p></li>
               <li><p><em>Book 6: Archangel Jeremiel</em></p></li>
               <li><p><em>Book 7: Archangel Jophiel</em></p></li>
               <li><p><em>Book 8: Archangel Metatron</em></p></li>
               <li><p><em>Book 9: Archangel Michael</em></p></li>
               <li><p><em>Book 10: Archangel Raguel</em></p></li>
               <li><p><em>Book 11: Archangel Raphael</em></p><li>
               <li><p><em>Book 12: Archangel Raziel</em></p></li>
               <li><p><em>Book 13: Archangel Sandalphon</em></p></li>
               <li><p><em>Book 14: Archangel Uriel</em><p></li>
               <li><p><em>Book 15: Archangel Zadkiel</em></p></li>
           </ol>
           </div>
       </div>
   </div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Being Psychic for Beginners</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 1: Ariel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Best of Both Worlds</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 2: Archangel Azrael</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>College Life for the Physically Challenged</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 3: Archangel Chamuel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>The Other-side is Just Around the Corner</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 4: Archangel Gabriel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book about Psychic Children (to be named later.)</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 5: Archangel Haniel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Coming Out of the Spiritual Closet: A Journey of a Catholic to an Eclectic Witch</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 6: Archangel Jeremiel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>My Video Game Journal</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 7: Archangel Jophiel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>My Zombie Journal</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 8: Archangel Metatron</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Mission Critical</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 9: Archangel Michael</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book about Atlantis</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 10: Archangel Raguel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book about Reiki</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 11: Archangel Raphael</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Cords: Living a Life Free of Fear-Based Attachment</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 12: Archangel Raziel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Coming Soon!</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 13: Archangel Sandalphon</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Coming Soon!</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 14: Archangel Uriel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%; clear: left;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Coming Soon!</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"><em>Book 15: Archangel Zadkiel</em></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <div class="cover-img"><div class="cover-img-text">Cover Coming Soon!</div></div>
           <strong><em><p class="book-desc">The book description will be coming soon! Keep your eyes peeled on this page for more information!</p></em></strong>
           <div class="button-panel" align="center"><button>Buy Book on <strong>Amazon</strong></button><button>Buy a <strong>Signed Copy</strong></button></div>
           <hr />
           <h3 align="center" class="Amazon-Review-Header"><strong>Did you read the book?</strong></h3>
           <p class="Review-Desc">If you answered an "Yes!" to the above question, <em>thank you!</em> It is greatly appreciated! I hope tbat you enjoyed it! It would mean a great deal to me if you cuold please takea a few minutes of your time to leave me a review on the book's Amazon page. It will not only make me happy, but it will also show other potential readers that you enjoyed the book and that you recommend it to them.</p>
           <div class="button-panel" align="center"><button>Leave a Review on <strong>Amazon</strong></button> <button>Leave a Testimonial on <strong>My Website</strong>!</button></div>
       </div>
</div>
</div>
</div>
</div>

<!-- <div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center"></h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 50%;">
   <div style="padding-right: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div>

<div style="float: left; width: 49.9%;">
   <div style="padding-left: 5px;">
<div class="container boards">
<div class="title-bar Books-TOC">
       <h3 align="center">Louis' Books Table of Contents</h3>
   </div>
   <div class="content">
       <div class="TOC-Contents">
           <p>Test</p>
       </div>
</div>
</div>
</div>
</div> -->

[Kami]

Just a reminder: CSS is, by its very name, cascading. This means that content is generally overridden by whatever is the most recent (ie lowest) on the sheet. If you are not using your stylesheet but are throwing in <style> tags on various pages, this will contribute to issues with trying to figure out why X element is not being properly altered (especially if you're altering the same content in two different places). If you need assistance with your CSS, it's almost always beneficial to include a link because we need to see how the CSS for the thing you want to change interacts with the CSS for the things you don't want to change.

If you aren't willing to provide one to someone publicly, you can always do so privately and give them an invitation to the forum (without admin powers of course) so they can view the source of the page as well as the visual display.

[Alan Vende]

Thank you for the reminder, Kami. I'd forgotten about that fact.

The CSS is below. There's some commented out areas because I'm still testing to see what works better. I'll most likely be removing it, but for the time being, I wanted it to stay there until the page was complete.

SPOILER: Click to show

/* Begin My Book Page CSS */
.TOC-Contents {
padding: 5px;
}
.Stand-Alone-Books-Header {
text-align: center;
}
.Series-Books-Header-Title {
text-align: center;
}
/* .content .Series-Books {
padding-right: 200px;
} */
.Books-TOC {
padding-bottom: 20px;
text-align: center;
}
.cover-img {
border: 1px solid #000000;
background-color: #000000;
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
text-align: center;
}
.cover-img .cover-img-text {
font-weight: bold;
color: #ffffff;
padding-top: 28px;
}
.content .TOC-Contents .Book-Note {
border: 1px solid #000000;
border-radius: 10px;
width: 500px;
height: 140px;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
.content .TOC-Contents .book-desc,
.content .TOC-Contents .Amazon-Review-Header,
.content .TOC-Contents .Review-Desc {
margin-bottom: 5px;
}
/* End My Book Page CSS */

At the moment, the CSS for the bullets is commented out at the top of the Custom Page:

<!-- <style>
   ol.Stand-Alone-Books {
       list-style-type: numeric;
   }
   .button-panel .button {
       color: #000000;
   }
</style> -->

I put this particular CSS in the Custom Page because I thought that's what was to be done--as I had been told to do that with a similar bullet code for another forum a few years ago--put it into the top of the Custom Page--but I'm unable to find that thread now, so I had to go a different route. (Just wanted to offer an explanation as to why it's up there, in case you were wondering.)

[Kami]

Alan, if I recall correctly I wrote your TOC code, didn't I? If you can find that thread, I can see what I can do to modify it for the new usage.

[Chris]

Oct 25, 2017 13:04:24 GMT -8 Scott said:

You are right it should work that way, however without seeing the rest of the code, not sure if something else is interfering? Like do you have the TOC Div set to specific height/width so it can't adjust to the changed padding?

.content .TOC-Contents .Book-Note {

    border: 1px solid #000000;

    border-radius: 10px;

    width: 500px;

    height: 140px;

    padding: 10px;

    margin-left: auto;

    margin-right: auto;

}

[Alan Vende]

Oct 25, 2017 19:44:22 GMT -8 Kami said:

Alan, if I recall correctly I wrote your TOC code, didn't I? If you can find that thread, I can see what I can do to modify it for the new usage.

Oh, duh! Yes, Kami , you did. I apologize. It's here, I think? (Holy moly! Over a year ago!)

I know you may find this cringe worthy, but I messed up and just realized my faux pax: I used the same classes as the other code--I should probably change it because it's happened more than once, especially when I was attempting to move the buttons and center them, where everything with the class TOC-Contents was being affected, since it was the parent class of every container and so forth.

I just found it recently... I don't know how that slipped through my fingers...

Thank you soooo much! <3

EDIT: I also have this thread as well. I wanted to go into that after I got this squared away. I thought that CSS and such should be fixed before I went into that, correct?

EDIT 2: I think that this is caused by the CSS in the TOC, but I cannot move the Stand-alone Books and Series Books divs above their respective div "columns". I wanted the books in alignment with them. Does that make sense?

It's pretty much the list of the other thread. I just thought that fixing the errors in the CSS would be the most logical thing to do first.

[Kami]

If you're using the same classes for the new stuff, it would only present a problem if you're using multiple instances of those classes and aren't differentiating between them -- which you are.

That said, for neater CSS it might be better to us entirely separate classes if you're modifying them to a significant degree so you won't have to worry about any overlap.

It would be up to you. It would be simple enough to mimic the behaviours from the TOC classes that you want while eliminating the ones you don't with a new class

[Alan Vende]

Sorry, I just thought of something... it's two totally different forums that I have the code on, so there shouldn't really be any significant problems, right? I think I would have more of a problem if I did that on the forum that the original code is on, correct?

I thought about changing the classes anyway, but it would be a significant undertaking, wouldn't it? Well, for me it would, since I always seem to code myself into the doghouse...

I think it may be easier to neaten up the CSS, like your first said, wouldn't it?

[Kami]

Oct 26, 2017 15:59:22 GMT -8 Alan Vende said:

Sorry, I just thought of something... it's two totally different forums that I have the code on, so there shouldn't really be any significant problems, right? I think I would have more of a problem if I did that on the forum that the original code is on, correct?

I thought about changing the classes anyway, but it would be a significant undertaking, wouldn't it? Well, for me it would, since I always seem to code myself into the doghouse...

I think it may be easier to neaten up the CSS, like your first said, wouldn't it?

If you're copy pasting code from one forum to another, then unless the forums are *identical* I would not reuse the same CSS; the CSS on Forum A is likely tweaked to accommodate for any other content you have, and imo it's easier to create something from scratch than it is to try and get a modified code, and try and reverse engineer the modifications and then remodify it.

[Alan Vende]

Oct 26, 2017 16:36:31 GMT -8 Kami said:

Oct 26, 2017 15:59:22 GMT -8 Alan Vende said:

Sorry, I just thought of something... it's two totally different forums that I have the code on, so there shouldn't really be any significant problems, right? I think I would have more of a problem if I did that on the forum that the original code is on, correct?

I thought about changing the classes anyway, but it would be a significant undertaking, wouldn't it? Well, for me it would, since I always seem to code myself into the doghouse...

I think it may be easier to neaten up the CSS, like your first said, wouldn't it?

If you're copy pasting code from one forum to another, then unless the forums are *identical* I would not reuse the same CSS; the CSS on Forum A is likely tweaked to accommodate for any other content you have, and imo it's easier to create something from scratch than it is to try and get a modified code, and try and reverse engineer the modifications and then remodify it.

Oh, whoops. Did I not post my CSS?


CSS

SPOILER: Click to show

/* Begin My Book Page CSS */
.TOC-Contents {
   padding: 5px;
}
.Stand-Alone-Books-Header {
   text-align: center;
}
.Series-Books-Header-Title {
   text-align: center;
}
/* .content .Series-Books {
   padding-right: 200px;
} */
.Books-TOC {
   padding-bottom: 20px;
   text-align: center;
}
.cover-img {
   border: 1px solid #000000;
   background-color: #000000;
   width: 100px;
   height: 100px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 10px;
   text-align: center;
}
.cover-img .cover-img-text {
   font-weight: bold;
   color: #ffffff;
   padding-top: 28px;
}
.content .TOC-Contents .Book-Note {
   border: 1px solid #000000;
   border-radius: 10px;
   width: 500px;
   height: 140px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
}
.content .TOC-Contents .book-desc,
.content .TOC-Contents .Amazon-Review-Header,
.content .TOC-Contents .Review-Desc {
   margin-bottom: 5px;
}
/* End My Book Page CSS */

It's a lot shorter than I thought it was.

[Kami]

are you using this on a custom page/on a pb forum or is this a more general coding Q?

[Alan Vende]

I apologize again. Oversight on my part. I'm using it on a PB forum - Custom Page.

[Kami]

OK so working off of this page, the first things that are standing out to me is that you're mixing inline styles with classes. Not necessarily bad, of course, but I'd advise to choose one or the other (barring like, throwing in some quick inline to make sure it works before popping it into the stylesheet).

As Chris pointed out, the reason that you're experiencing the cutoff is that you have specified the height of the class Book-Note to be 140px. Removing this then displays the margin as intended. I would advise, when dictating the size of your containers, to include a thought for how you'd like the margins to display. So, for instance, if you want a container that's 150px wide with a 5px padding on either side of your text, you'll only have about 140px of text space to actually work with.

Otherwise you get issues like the one you've experienced, or another common issue where the div winds up X amount of pixels larger than you want due to the padding.