How to arrange divs side by side automatically?-CodePudding

I want to insert divs as event entries in a "div_outside". The event entry should take 100% of the width if there is no other entry next to it. If there is another entry next to it, they should both be the same size next to each other.

My current code looks like this, but doesnt work:

test.css:

.column_div{
    position: relative;
    width: 200px;
    height: 800px;
    margin-top: 20px;
    margin-left: 20px;
    border: solid black;
}   

.new_event1{
    position: relative;
    width: 100%;
    height: 30px;
    float: left;
    background-color: red;
}

.new_event2{
    position: relative;
    width: 100%;
    height: 30px;
    float: left;
    background-color: green;
}

test.html:

<!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="test.css">
</head>
<body>
    <div  id="column_div"></div>

    <script src="test.js" defer></script>
</body>
</html>

test.js:

column_div = document.getElementById("column_div")

new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");

column_div.appendChild(new_event1)

new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");

column_div.appendChild(new_event2)

How i can do that with html and css?

CodePudding user response：

If I understand you correctly, the display: flex CSS attribute is what you're looking for.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .div_outside {
        border: 2px solid black;
        display: flex;
      }
      .div_outside > div {
        border: 2px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
        height: 300px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div >
      <div>Div 1</div>
      <div>Div 2</div>
      <div>Div 3</div>
    </div>
  </body>
</html>

CodePudding user response：

you didn't actually explain clearly what exactly you want but I think what you mean is that you want divs to be in a row with equal space. and if there is only one div, it should take 100% width. is that it? check the code and let me know if this is what you want or not.

for that, you need to make the parent display: flex: with flex-direction: row: and you don't need to use float.

column_div = document.getElementById("column_div")

new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");

column_div.appendChild(new_event1)

new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");

column_div.appendChild(new_event2)


// new_event3 = document.createElement("div")
// new_event3.classList.add("new_event3");

// column_div.appendChild(new_event3)

.column_div{
  position: relative;
  width: 200px;
  height: 800px;
  margin-top: 20px;
  margin-left: 20px;
  border: solid black;

  display: flex;
  flex-direction: row;
}   

.new_event1{
  position: relative;
  width: 100%;
  height: 30px;
  background-color: red;
}

.new_event2{
  position: relative;
  width: 100%;
  height: 30px;
  background-color: green;
}
/* 
.new_event3{
  position: relative;
  width: 100%;
  height: 30px;
  background-color: yellow;
} */

  <body>
    <div  id="column_div"></div>

    
</body>