Bootstrap/CSS div not floating left/right-CodePudding

I am trying to get my divs to float left for the first then float right for the second etc. I've been trying it using float and bootstrap 5 float also. Neither of them works; I've googled about it and can't seem to find anything about it.

The plan is to have a background image but for now, I am simply using colored divs these being red and blue.

Any help would be great!

   /*Main*/
   @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

   html, body
   {
       width: 100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
       overflow-x: hidden; 
       background-color: #0f2471;
       font-family: 'Poppins', sans-serif;
      }

 /*NavBar ;*/

   #logo-space{
     width: auto;
     height: auto;
   }

   #logo-space img{
     width: 5010;
     height: auto;
     position: relative;
     left: 2.5rem;
   }

   #fms-btn{
      width: 120px;
      position: relative;
      top: 1rem;
      right: 2rem;
      height: 60px;
      font-size: 1rem;
      justify-content: center;

      text-decoration: none !important; 
      background-color: #030b29;
      color: white;
    }

   .nav-bar{
       background-color: #16377e;
       position: relative;
   }
 
   #navbar-space .nav-link{
     position: relative;
     left: 4rem;
   }


   #home-img{
    /* to remove space between images, because car image has this wave and page background would be visable */
  margin-bottom: -86px;
}

  #home-img img{
  object-fit: cover;
  width: 100%;
  height: 50vh;
  }

  #about-us{
  background-color: white;
  background-position: center;
  background-size: cover;
  z-index: 2;
  /* probably padding needed */
  color: black;
  height: 50vh;
  }

  #about-title{
  font-weight: bold;
  font-size: 45px;
  }

  #about-text{
    font-size: large;
  }

  #learn-more-btn{
  width: 15rem;
  font-size: 20px;
  text-decoration: none !important; 
  background-color: #030b29;
  color: white;
  }

  #ee{
    width: auto;
    padding-top: 10px;
    height: 70%;
    justify-content: center;
  }

  .outer-div{
    background-color: white;
    width: 120%;
    height: 100%;
  }

  #police-div{
    background-color: red;
    width: 100%;
    height: auto;
    padding: 50px;
    padding-right: -1rem;
    float: left;
    background-repeat: no-repeat;
    text-overflow: unset;
    justify-content: center;
    font-size: large;
  }

  #ambulance-div{
    background-color: blue;
    width: 100%;
    height: auto;
    padding: 50px;
    padding-right: -1rem;
    float: left;
    background-repeat: no-repeat;
    text-overflow: unset;
    justify-content: center;
    font-size: large;
  }

  @media screen and (max-width: 400px){

    body{
      margin: 0;
      font-family: 'Poppins', sans-serif;
      width: 100%;
    }

    #logo-space{
      width: auto;
      height: auto;

    }
 
    #logo-space img{
      width: auto;
      height: auto;
      position: relative;
      left: -1.5rem;
    }
 
    #fms-btn{
       width: 120px;
       position: relative;
       top: -1rem;
        right: 2px;
       height: 60px;
       margin: 0;
       padding: 0;
       font-size: 1rem;
       justify-content: center;
 
       text-decoration: none !important; 
       background-color: #030b29;
       color: white;
     }

     .nav-bar{
      margin-top: -10px;
     }

     #about-us{
      background-image: url('./img/l3.png');
      background-position: center;
      background-size: cover;
      z-index: 2;
      /* probably padding needed */
      padding: 25vh 0;
      color: black;
      height: 50%;
    }

    #about-text{
      font-size: small;
      width: 15rem;
      position: relative;
      bottom: 25vh;
      font-size: small;
    }

    #about-title{
      font-weight: bold;
      font-size: 20px;
      position: relative;
      bottom: 25vh;
    }

    #learn-more-btn{
      width: 5rem;
      font-size: 18px;
      text-decoration: none !important; 
      background-color: #16377e;
      color: white;
      position: relative;
      right: 1rem;
      
      text-align: center;
    }

    #redirect-symbol{
      position: relative;
      left: 3px;
    }

    #ee{
      height: 120%;
      position: relative;
      bottom: 11rem;
    }
  }

<!DOCTYPE html>
<html>
  <!--When Site is finished, check all compats-->
  <head>
    <title>Testing</title>
    <!--CSS-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!--Font Awesome-->
    <script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
    <!--Index Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/divstyle.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
    
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <style type="text/css"></style>
  </head>

  <body>
    
  <body style="margin: 0;">

        <!--Logo Space-->
        <div id="logo-space">
        <div >
            <div >
            <img id="logo" src="img/logo.png"  alt="">
            </div>

            <button id="fms-btn" type="button" >
                <span  style="text-decoration: none;">Head to FMS</span>
            </button>
        </div>
        </div>

    <!--Nav Bar-->
    <div id="home">
        <nav id="navbar-space" >
        <div >
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

            <div  id="navbarSupportedContent">
            <ul >
                <li >
                <a  aria-current="page" href="./index.html">HOME</a>
                </li>
                <li >
                <a  href="#about">ABOUT US</a>
                </li>
                <li >
                <a  href="./divisons.html">DIVISIONS</a>
                </li>
                <li >
                <a  href="#appeals">APPEALS</a>
                </li>
            </ul>
            </div>
        </div>
        </nav>
    </div>

    <!--  Top image GTA, there is no text so it can be <img> tag -->
    <div id="home-img" style="position: relative; z-index: 2;">
        <img src="/img/div/bg1.png" alt="">
    </div>
    
      <!--  About us section, with car in background -->
      <div id="about-us" style="position: relative; z-index: 3;">
          <!--  Your regular columns and content -->
          <div >
            <div >
              <div id="about-title" > 
                <span style="text-decoration: none;">What do we offer?</span> 
                <div  >
                  <button id="learn-more-btn" type="button" >
                         <img id="redirect-symbol" src="img/redirect.png"  alt="" width="30" height="30" style="padding-right: 5px;">
                         <span  style="text-decoration: none;">Learn More</span>
                  </button>
                </div>
              </div>
              <div id="about-text" >
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil tempore cumque cupiditate alias nostrum ad beatae neque mollitia. Molestiae blanditiis voluptatum necessitatibus dolore omnis iure tenetur repellendus quis consequatur magni. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quo, ducimus tempore sit mollitia reprehenderit.
                  </p>
              </div>
              <div >
                    <img id="ee" src="./img/div/ee.png" alt="">
              </div>
            </div>
          </div>
      </div>
  
      <div id="about-divisions">
        <div  style="color: white;">
          <div >

            <div >
              <div >
                <div id="police-div" >
                  <div >
                    <h2  style="text-decoration: underline;">Lorem, ipsum.</h2>
                    <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
                  </div>
                </div>
              </div>
            </div>

            <div  style="float: left;">
              <div >
                <div id="ambulance-div" >
                  <div >
                    <h2  style="text-decoration: underline;">Lorem, ipsum.</h2>
                    <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
                  </div>
                </div>
              </div>
            </div>


          </div>

        </div>        
      </div>
  </body>

</html>

CodePudding user response：

If i understand correct your question do it similar like this

#ambulance-div{background: red; color: #FFF;}
#police-div{background: blue; color: #FFF;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
     <div >
       <div id="police-div" >
         <h2  style="text-decoration: underline;">Lorem, ipsum.</h2>
         <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
       </div>
     </div>
  </div>
  <div >
     <div >
       <div id="ambulance-div" >
         <h2  style="text-decoration: underline;">Lorem, ipsum.</h2>
         <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

instead of using float, you can use flex or div row col classes that can help you more then float