what is the reason that css float option doesn't work?

Question

The direction of the body is rtl. I want the button-div div to stick to the left side of it's parent div, but It doesn't. Why is that?

#header-row {
  display: flex;
  margin: 0px 100px 0px 100px;
}

#button-div {
  float: left;
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="header.css">
</head>

<body dir="rtl">
  <div id="header-row">

    <div id="button-div">
      <div>
        <button id="login-button">ورود</button>
        <button id="register-button">ثبت نام</button>
      </div>
      <button id="market-button">ورود به فروشگاه</button>
    </div>
  </div>
</body>

flex children do not float , they are part of the flex layout .. to push it to left, `margin-right:auto` will do. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for options avalaible to manage a flex layout. — G-Cyrillus, Jan 23 '21 at 09:12
You probably also need to imbricate flexbox to get easily rid of the white-space ... https://jsfiddle.net/ovkLsdhy/ — G-Cyrillus, Jan 23 '21 at 10:42

score 1 · Answer 1 · answered Jan 23 '21 at 09:13

1

That's because float and clear are not supported for flex items. Your options are either to set correct justify-content, or if all items are, let's say, rightly aligned, then to align it to left you could do: margin-right: auto

answered Jan 23 '21 at 09:13

benNek

58
1
7

score 1 · Answer 2 · answered Jan 23 '21 at 09:17

The problem is that float is not supported in flex items. check this out and let me know if it works perfectly.

   #header-row {
       display: flex;
       margin: 0px 100px 0px 10px;
   }

   .button-div {
       float: left;
   }

<!DOCTYPE html>
   <head>
   <link rel="stylesheet" href="header.css">
   </head>
   <body dir="rtl">
       <div id="header-row" class="button-div">
    
               <div >
                   <button id="login-button">ورود</button>
                   <button id="register-button">ثبت نام</button>
               </div>
               <button id="market-button">ورود به فروشگاه</button>
        </div>
   </body>

score 0 · Answer 3 · edited Jan 23 '21 at 10:36

float property is ignored with flex, so can either remove flex or if you want to use flex, then pass flex-direction

Solution 1.

<html>

<head>
  <style>
    #header-row {
      margin: 0px 100px 0px 100px;
    }
    
    #button-div {
      float: left;
    }
  </style>
</head>

<body dir="rtl">
  <div id="header-row">

    <div id="button-div">
      <div>
        <button id="login-button">ورود</button>
        <button id="register-button">ثبت نام</button>
      </div>
      <button id="market-button">ورود به فروشگاه</button>
    </div>
  </div>
</body>

</html>

solution 2.

<html>

<head>
  <style>
    #header-row {
      display: flex;
      margin: 0px 100px 0px 100px;
      flex-direction: row-reverse;
    }
    
    #button-div {}
  </style>
</head>

<body dir="rtl">
  <div id="header-row">

    <div id="button-div">
      <div>
        <button id="login-button">ورود</button>
        <button id="register-button">ثبت نام</button>
      </div>
      <button id="market-button">ورود به فروشگاه</button>
    </div>
  </div>
</body>

</html>

what is the reason that css float option doesn't work?

3 Answers3