im using float left but the divs are not going to aside-CodePudding

i paste a code that i found to centralize the content of container, but now im trying to use float:left and right and the divs are not going to the side. Link for codepen of this code: https://codepen.io/racr-1/pen/oNqoZVQ

.container {
  width: 65%;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  float: left;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: right;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div >
    <h1>content of h1</h1>
    <div ></div>
    <div ></div>
  </div>
</body>

</html>

CodePudding user response：

Let me know if this works for you. I just added a div around div 1 and 2 to prevent flex-direction: column from being applied.

.container {

        width: 65%;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .div1 {
        width: 100px;
        height: 100px;
        background-color: aqua;
        float: left;
    }

    .div2 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: right;
    }

<!DOCTYPE html>
<html lang="en">
<body>
    <div >
        <h1>content of h1</h1>
        <div>
        <div ></div>
        <div ></div>
        </div>

    </div>

</body>

</html>

CodePudding user response：

You cannot use floats when using flexbox as you do. What you need is align-self on child elements.

.container {
  width: 65%;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  align-self: flex-start;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  align-self: flex-end;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div >
    <h1>content of h1</h1>
    <div ></div>
    <div ></div>
  </div>
</body>

</html>