CSS - position an element on the right

Question

CSS - position an element on the right

Navigation

#1 by (1 votes)

1

Iwanttopositionthediv"bookright" on the right side of the HTML page I believe I have the correct CSS code but it is not working. pf see the photo, at this moment it appears underneath the image, I want it to appear on the side, on the right side. Someone who knows how to do?

IhavethefollowingcodeinHTML:

<tablecellpadding="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;

            }

html css

asked by anonymous 06.05.2017 / 16:57

1 answer

How To Get Root Selected Jstree Display a value with the non-zeroed cents and using Float?

score 1 · Answer 1

First, it does not make much sense to set element div inside a tr element. The browser understands and displays the element, but semantically it 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 rowspan="10" attribute to a td element, the column will take up a space equivalent to 10 rows. If this is the first% w of% of the table, it will occupy all the vertical space of the table (assuming that it has the exact 10 rows), causing all new td elements to be 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 modified to fit the example. You can change it according to your needs, but an important point for it to work is to remove td from the display: block element.

Remember that it's a bit tricky to work responsively on an HTML table, for example, if you want to display book details below the image when accessed from a mobile device. For this, it would be easier to structure using .book instead of div .