Is it true that the float property is deprecated?

If so, what alternative should I use instead?

#security .security-wrapper {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    width: 50%;
}

body {
  margin:0;
  padding: 0;
  
}

#security {
  position: relative;
  background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat; 
    background-size: cover;
  background-attachment: fixed;
    width: 100%;
    min-height: 500px;
}

#security .security-wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  float: right;
  width: 50%;
}

#security .security-title {
  text-transform: uppercase;
  font-size: 32px;
  color: #c22312;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 25px;
}

<div id="security">
<div class="security-wrapper">
   <div class="security-title">Security investment solutions</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I ran your code and it works well as far as I think.

and no, the float property is not deprecated yet in CSS, you can still use it. but for an advanced and more clean easy code, you better use flexbox

your code can be then something like that:

body {
  margin: 0;
  padding: 0;
}

#security {
  position: relative;
  background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 500px;
  display: flex; /* displaying it as a flexbox */
  justify-content: end; /* shifting its content to the end "right" */
}

#security .security-wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  width: 50%;
}

#security .security-title {
  text-transform: uppercase;
  font-size: 32px;
  color: #c22312;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 25px;
}

<div id="security">
  <div class="security-wrapper">
    <div class="security-title">Security investment solutions</div>
  </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You can learn more about flexbox here:

w3schools

css-tricks