div position problem i want this hello text under the pricing section` please help me to solve this problem i am using different div but it still show me same result div position problem i want this hello text under the pricing sectiondiv position problem i want this hello text under the pricing section div position problem i want this hello text under the pricing section

@import url("https://fonts.googleapis.com/css2?family=Fira Sans Condensed:wght@100&family=Poppins:wght@300;400;500;600&family=Roboto:wght@300&family=Silkscreen&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
body {
  background: #161c41;
}

.gallery {
  position: relative;
  float: left;

  /* display: flex; */
}

.cardBx {
  width: 100%;
  /* min-height: 100%; */
  /* display: flex; */

  /* flex-wrap: wrap; */
  justify-content: center;
  align-items: center;
  float: left;
}

.cardBx .card {
  width: 280px;
  border-radius: 10px;
  margin: 20px 40px;
  background: #1b2141;
  overflow: hidden;
}

.cardBx .card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.cardBx .card .content {
  padding: 10px;
}

.cardBx .card .content h4 {
  color: white;
  margin: 15px 0;
}

.cardBx .card .progress-line {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: #35407e;
  margin-bottom: 15px;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.cardBx .card .progress-line span {
  position: absolute;
  height: 100%;
  width: 80%;
  border-radius: 10px;
  background: #1aeeef;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.cardBx .card .info {
  border-top: 2px solid #35407e;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cardBx .card .info p {
  font-size: 1em;
  color: white;
}

.cardBx .card .info p span {
  color: #1aeeef;
}

.cardBx .card .content .info a {
  display: inline-block;
  padding: 10px 20px;
  margin: 20px 0;
  border: 1px solid #1aeeef;
  text-decoration: none;
  font-weight: 700;
  border-radius: 5px;
  color: white;
  letter-spacing: 1px;
}

.cardBx .card .content .info a:hover {
  background: #1aeeef;
  border: none;
  color: #050e2d;
  box-shadow: 0 0 10px #1aeeef;
}

.cardBx {
  display: flex;

  justify-content: center;
  align-items: center;
}
/* ////nav */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #05123d;
  height: 70px;
  text-decoration: none;
}

.logo {
  width: 160px;
  margin-right: 45px;
  margin-left: 10px;
}

.nav-left {
  display: flex;
  align-items: center;
}
.nav-left ul li {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  cursor: pointer;
  list-style: none;
  margin-left: 70px;
  text-decoration: none;
  display: inline-block;
}

.nav-left ul li a {
  color: rgb(255, 255, 255);
  font-size: 25px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-decoration: none;
  padding: 1rem;
}

/* ===========hjbhedbfj======== */
/* html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica", sans-serif;
} */

img {
  max-width: 100%;
}

.slider-container {
  height: 600px;
  width: 100%;
  border-top: 2px solid #1aeeef;
  border-bottom: 2px solid #1aeeef;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.menu {
  position: absolute;
  left: 0;
  z-index: 900;
  width: 100%;
  bottom: 0;
}

.menu label {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50px;
  margin: 0 0.2em 1em;
  &:hover {
    background: red;
  }
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: left 0s 0.75s;
}

[id^="slide"]:checked   .slide {
  left: 0;
  z-index: 100;
  transition: left 0.65s ease-out;
}

.slide-1 {
  background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}
.slide-2 {
  background-image: url("https://freefiremobile-a.akamaihd.net/common/web_event/official2.ff.garena.all/img/20228/29bfa3738921a9e9d096f5c4cdfaf297.jpg");
}
.slide-3 {
  background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}

/* ==========footer========== */

.bddiv {
  display: inline-block;
  vertical-align: middle;
  color: #1aeeef;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
    </style>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- css link -->
    <link rel="stylesheet" href="./shop.css" />
    <!-- <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    /> -->
    

    <title>Shop</title>
  </head>
  <body>

    <nav>
        <div >
          <img src="./ggh.svg"  />
          <ul>
            <li><a href="./home.php">Home</a></li>
            <li><a>Turnament</a></li>
            <li><a>News</a></li>
            <li ><a>Shop</a></li>
            <li><a>About us</a></li>
            
          </ul>
      </nav>
      <main> 
  <?php
  include './slider/slider.php' ?>

      <?php
    include 'shopdb.php';
       
    $sql="SELECT * from shop_table";
    $query=mysqli_query($conn,$sql);
    while($info=mysqli_fetch_array($query)){
       ?>


     <div >

      <div >
        <div  data-item="pc">
          <img src="shop/<?php echo $info['imageup']; ?>" alt="loding">
          <div >
            <h4><?php echo $info['gamename']; ?></h4>
            <div ><span></span>
          </div>
            <div >
              <p>pricing<br /><span> <?php echo $info['price']; ?></span></p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <?php
    }
    ?>

    <div > hello</div>
    </main>
   
  </body>
</html>

`

CodePudding user response：

the float made this problem if you want to put your price section in the right , remove float and use this code:

.gallery {
  position: relative;
}

.cardBx {
  width: 100%;
  justify-content: start;
  align-items: center;
}

CodePudding user response：

Please Try This

Just add clear:both as style in <div> containing "Hello" text

<div  style="clear:both;"> hello</div>

CodePudding user response：

I just increase the padding-top and padding-left and it works fine, Here's the code of the CSS I changed.

.bddiv {
    padding-top: 230px;
    padding-left: 60px;
    color: #1aeeef;
}

Just change the bddiv CSS. The Html code is working good