CSS - positioning an element on the right

Question

I want to position the div "bookright" on the right side of the HTML page I think I have the correct CSS code but it’s not working yet. pf see the photo, right now appears under the image, I want it to appear next, right side. Someone who knows how to?

I have the following HTML code:

<table cellpadding="2" cellspacing="2" border="0">
<?php
    if(!$r)
    {
        echo "Query '".$sql."' failed";
    }
    else{
        while($books =mysqli_fetch_object($r)){?>
        <tr>
        <td class="book"><?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="370" width="220">'; ?> </td>
        <div class="bookright">
        <td><label for="ISBN">ISBN:</label> <?php echo $books->ISBN;?> </td>
        <td> <label for="title">Title:</label><?php echo $books->Title;  ?></td> 
        <td> <label for="author's name">Author's name:</label><?php echo $books->Authorsname; ?></td> 
        <td> <label for="edition">Edition:</label><?php echo $books->edition;?></td> 
        <td> <label for="year">Year:</label><?php echo $books->year;   ?></td> 
        <td> <label for="category">Category:</label><?php echo $books->category;   ?></td> 
        <td> <label for="publisher">Publisher:</label><?php echo $books->publisher;  ?></td> 
        <td> <label for="quantity">Quantity-in-stock:</label><?php echo $books->quantityinstock; ?></td> 
        <td> <label for="price">Price:</label><?php echo $books->price; ?></td> 
        <td> <a href="shoppingcart.php?ISBN=<?php echo $books->ISBN; ?>">Order Now</a></td>
        </div>
        </tr>
        <?php }} 
    ?>
</table>

CSS:

.book{
                  display: block;
                  width:230px;
                  height:390px;
                  box-shadow: 0 0 20px #aaa;
                  margin: 25px;
                  padding: 10px 10px 0 10px;
                  vertical-align: top;
                  transition: height 1s;
            }
            .bookright {
                right:0;
                position:absolute;
            }
            td{
                display:block;

            }

Answer 1

First, it doesn’t make much sense to define you in element div within an element tr. The browser understands and displays the element, but semantically this makes the least sense. Second, there is no need for you to position the element with CSS, you can take advantage of the properties of the HTML table itself. For example, if you set the attribute rowspan="10" in one element td, the column shall occupy a space equivalent to 10 lines. If this is the first td of the table, it will occupy the entire vertical space of the table (considering that it has the exact 10 lines), making all the new elements td are positioned to the right of it. See the example:

table {
  border: 1px solid black;
}

table td {
  padding-left: 20px;
}

.book{
  width:230px;
  height:390px;
  box-shadow: 0 0 20px #aaa;
  margin: 25px;
  padding: 10px 10px 0 10px;
  vertical-align: top;
  transition: height 1s;
}

<table>
  <tr>
    <td class="book" rowspan="10"><img src="http://placehold.it/220x370" alt=""></td>
    <td>ISBN: 12345</td>
  </tr>
  <tr>
    <td>Title: Sed porttitor lectus nibh.</td>
  </tr>
  <tr>
    <td>Author's name: John Doe</td>
  </tr>
  <tr>
    <td>Edition: 1</td>
  </tr>
  <tr>
    <td>Year: 2017</td>
  </tr>
  <tr>
    <td>Category: Fiction</td>
  </tr>
  <tr>
    <td>Publisher: Pellentesque</td>
  </tr>
  <tr>
    <td>Quantity in stock: 1000</td>
  </tr>
  <tr>
    <td>Price: 50.00</td>
  </tr>
  <tr>
    <td><a href="#">Order Now</a></td>
  </tr>
</table>

The CSS code has been slightly changed to fit the example. You can change it as needed, but an important point for it to work is to remove display: block of the element .book.

It is worth remembering that it is a little complicated to work responsibly in an HTML table, if you want to, for example, display the book details below the image when accessed from a mobile device. To do this, it would be easier to structure using div in place of table.