CODEWITHSUNDEEP
htmlcss
Mohammed
Mohammed

Reputation: 103

How to keep sidebar from moving to the middle?

I have a sidebar that has a list of the products categories and in the main body I have created a repeat region to show those products based on the category clicked. If I choose an empty category the design stays the same but when I choose a category that has products in it somehow the sidebar comes to the middle of the page and even the footer becomes smaller.

I didn't have problem with the sidebar before I created the repeat region and it didn't move or anything. I have created a fiddle that has the page & css file. Please let me know if I missed anything as I haven't used fiddle before. Thanks.

https://jsfiddle.net/w4rhvbL0/1/

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="IndexStyle.css"/>
    <meta name="viewport" content="width= device-width, intial-scale=1.0">
</head>
<body class="body">
    <header class="MainHeader">
    <img src="images/header-image-5.jpg">
    <nav><ul>
         <li class="active"><a href="index.php">Home</a></li>
         <li><a href="Product.php">Products</a></li>
         <li><a href="AboutUs.php">About Us</a></li>
         <li><a href="ContactUs.php">Contact Us</a></li>
        </ul>
    </nav>
    </header>
    <div class="MainBody">
    <h1>Products
      </h1>
      <div class="productsresult">
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?>
<?php do { ?>
    <div class="products"> <p><?php echo $row_ProductsData['product_name']; ?>
        <?php echo $row_ProductsData['price']; ?>
        <?php echo $row_ProductsData['image']; ?></p>
        <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?>
    </div>
<?php } // Show if recordset not empty ?>
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?>
  There are no products in this category!
  <?php } // Show if recordset empty ?>
     </div>
     </div>
    <aside class="SideBar">
<?php include ("/includes/catalogue.php"); ?>
    </aside>
    <Footer class="Footer"> 
        <p>Copyrights reserved 
        </p>

    </Footer>
</body>
</html>

enter image description here

enter image description here

Upvotes: 2

Views: 96

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

In your code you check this condition if ($totalRows_ProductsData > 0) {

But you don't close your tags correctly. This is the HTML your code generates:

<div class="productsresult">
    <div class="products"><p>.....</p>
        <div class="products"><p>.....</p>
            <div class="products"><p>.....</p>
</div>
<aside class="SideBar"></aside>

Note that you don't close your div inside the while loop, so it generate an invalid HTML structure, and put the aside element inside the unclosed div tags resulted by the loop.

The browser "fix" this unclosed tags by auto-closing them, so you can end up with the following structure:

<div class="productsresult">
    <div class="products"><p>.....</p>
        <div class="products"><p>.....</p>
            <div class="products"><p>.....</p></div>
            <aside class="SideBar"></aside>
            <Footer class="Footer">....</Footer>
       </div>
   </div>
</div>

To fix this you need to change the following:

<div class="productsresult">
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?>
    <?php do { ?>
        <div class="products"> 
            <p>
                <?php echo $row_ProductsData['product_name']; ?>
                <?php echo $row_ProductsData['price']; ?>
                <?php echo $row_ProductsData['image']; ?>
            </p>
        </div>
    <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?>
<?php } // Show if recordset not empty ?>
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?>
    There are no products in this category!
<?php } // Show if recordset empty ?>
</div>

<aside class="SideBar">
    <?php include ("/includes/catalogue.php"); ?>
</aside>

The above code will result the following code:

<div class="productsresult">
    <div class="products"><p>.....</p></div>
    <div class="products"><p>.....</p></div>
    <div class="products"><p>.....</p></div>
</div>
<aside class="SideBar"></aside>

Note that if you need only one products wrapper div, you should change the code to this:

<div class="productsresult">
<?php if ($totalRows_ProductsData > 0) { // Show if recordset not empty ?>
    <div class="products"> 
        <?php do { ?>
            <p>
                <?php echo $row_ProductsData['product_name']; ?>
                <?php echo $row_ProductsData['price']; ?>
                <?php echo $row_ProductsData['image']; ?>
            </p>
        <?php } while ($row_ProductsData = mysql_fetch_assoc($ProductsData)); ?>
    </div>
<?php } // Show if recordset not empty ?>
<?php if ($totalRows_ProductsData == 0) { // Show if recordset empty ?>
    There are no products in this category!
<?php } // Show if recordset empty ?>
</div>

Which will result the following structure:

<div class="productsresult">
    <div class="products">
        <p>.....</p>
        <p>.....</p>
        <p>.....</p>
    </div>
</div>
<aside class="SideBar"></aside>

Upvotes: 1

Related Questions