div making inner div's one below another

Question

.right {
  display: flex;
  background-color: yellowgreen;
}

.left {
  display: flex;
  background-color: yellow;
}

.container {
  display: flex;
  background-color: brown;
  justify-content: space-between;
}

<div class="container">
  <div class="temp">
    <div class="right">right</div>
    <div class="left">left</div>
  </div>
</div>

If I remove div with class name "temp" then the right and left div appear at right and left corner of the screen.

But if I keep the div "temp" then the right and left div appear one below another.'

keeping div temp

removing div temp

What do you want to ask? Do note that setting flex to container will impact layout of its immediate child, not grandchilds. So adding temp will change the layout, because then there is only one child of container, left and right are child of temp div which will have default display property set as block. — Abhinav Kulshreshtha, May 01 '22 at 05:13

score 0 · Answer 1 · answered May 01 '22 at 05:07

0

.container{
   display: flex;
   background-color: brown;
   justify-content: space-between;
   flex-direction: column;
}

Right div and Left div Come in Onebelow another. Like Column. Try this it will work

answered May 01 '22 at 05:07

S.Manjunath

1
3

score 0 · Answer 2 · answered May 01 '22 at 05:08

This is how you should do it!

.container{
    display:flex;
    background-color: brown;
    flex-direction: row;
    justify-content: space-between;
}
.container div {width:100px; height:100px;}
.left{background-color: yellow;}
.right{background-color: yellowgreen;}

<div class="container">
   <div class="left">left</div>
   <div class="right">right</div>
</div>

score 0 · Answer 3 · answered May 01 '22 at 05:10

Just give flex to .temp not .container.

.right {
  background-color: yellowgreen;
}

.left {
  background-color: yellow;
}

.temp{
  display: flex;
  background-color: brown;
  justify-content: space-between;
}

<div class="container">
  <div class="temp">
    <div class="right">right</div>
    <div class="left">left</div>
  </div>
</div>

score 0 · Answer 4 · answered May 01 '22 at 07:22

Currect, here container is not effect because the child element of container is temp. So, in this case it is not working.

.temp {
    display: flex;
    background-color: brown;
    justify-content: space-between;
}

.right {
    background-color: yellowgreen;
}

.left {
    background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="temp">
          <div class="right">right</div>
          <div class="left">left</div>
        </div>
      </div>
</body>
</html>

div making inner div's one below another

4 Answers4