Hi,
ich probiere mich gerade ein wenig in HTML und CSS. Benutze dazu Bootstrap.
Mein problem ist, dass ich meine Seite in zwei Teile aufgeteilt habe. Diese Teile jedoch nicht komplett ausgefüllt werden sondern Links und rechts jeweils an die Wand gedrückt werden. Danke im Voraus für eure Hilfe.
ich probiere mich gerade ein wenig in HTML und CSS. Benutze dazu Bootstrap.
Mein problem ist, dass ich meine Seite in zwei Teile aufgeteilt habe. Diese Teile jedoch nicht komplett ausgefüllt werden sondern Links und rechts jeweils an die Wand gedrückt werden. Danke im Voraus für eure Hilfe.
HTML-Code:
<div class="container-left"> <div class="figure col"> <img src="<?php echo $idFront ?>" class="figure-img rounded-3 w-25 border border-warning" alt="idFront"> </div> <div class="figure col"> <img src="<?php echo $idBack ?>" class="figure-img rounded-3 w-25 border border-warning" alt="idBack"> </div> </div> <div class="container-right"> <div class="order"> <div class="col"> <table class="table table-dark table-striped"> <tr> <th scope="col">Nr.</th> <th scope="col">Drink</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <th scope="row">2</th> <td>Whiskey</td> <td>7.50€</td> </tr> </table> </div> </div> </div>
Code:
.container-left{ float: left; width: 50%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; } .container-right{ float: right; width: 50%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; text-align: center; } .container-right table{ width: 100%; }
Kommentar