I'm trying to make a dashboard When placing small boxes in the board The boxes that are in the new row go outside the bounds of the page The boxes in the first row appear correctly, but the problem starts when they go down to the second and third row, and so on..... How can I solve this problem please?`
<!-- Small boxes (Stat box) -->
<div >
<div >
<!-- small box -->
<div >
<div >
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total = $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div >
<div >
<!-- small box -->
<div >
<div >
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total = $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div >
<div >
<!-- small box -->
<div >
<div >
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total = $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div >
<div >
<!-- small box -->
<div >
<div >
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total = $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div >
<div >
<!-- small box -->
<div >
<div >
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total = $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- ./col -->
</section>`
CodePudding user response：
Your HTML structure is wrong. You can see it clearly in sublime or vs code or any of the html editor. Assuming that you are going to Loop either the 'Box' or the 'Row of 4 Boxes', I have re-structured the HTML without the "PHP" code.
Looping Option 1 :
Look for <!-- Looping Option 1 -->, You can loop the boxes from here.
Looping Option 2 :
Look for <!-- Looping Option 2 -->, You can loop the row of 4 boxes from here.
<section>
<div >
<!-- Lopping option 2 -->
<div >
<!-- Lopping option 1 -->
<div >
<!-- small box -->
<div >
<div >
<h3></h3>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<!-- Lopping option 1 -->
<div >
<!-- small box -->
<div >
<div >
<h3></h3>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<div >
<!-- small box -->
<div >
<div >
<h3></h3>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
<div >
<!-- small box -->
<div >
<div >
<h3></h3>
<p>Total Sales from products</p>
</div>
<div >
<i ></i>
</div>
<a href="../booking/index.php" >More info <i
></i></a>
</div>
</div>
</div>
<!-- Lopping option 2 -->
</div>
</section>