Moving Two Divs Side-by-Side-CodePudding

I'm having some problems getting divs onto the same line. My layout idea is attached below, with the idea of having multiple lines of a rectangular/square div duo going down the page, beyond what was shown in this plan. Without the long, rectangular divs, each square was in the planned line.

An image of several containers stacked in lines

What my page currently looks like, however, is this, once the rectangles were added (yes, the black div is going off the page):

An image of several containers on a page

I have purposely removed some of the containers for the boxes on the right side as these are not essential. This is my basic code for the containers:

.1 {
  height: 200px;
  width: 200px;
  display: block;
}

.2 {
  height: 200px;
  width: 200px;
  float: right;
  display: inline;
}

.3 {
  height: 200px;
  width: 200px;
  overflow: hidden;
  clear: both;
}

.container {
  float: right;
  height: 200px;
  overflow: hidden;
}

<div >
  <p> text </p>
</div>

<div >
  <p> First Div </p>
</div>

<div >
  <p> Second Div </p>
</div>

<div >
  <p> text </p>
</div>

<div >
  <p Third Div </p>
</div>

Moving the position of the divs did not work, so perhaps there is some alternative to using an endless amount of divs?

I am aware that this is extremely messy and probably not the most efficient way to do this. However, each div will eventually be styled and unique. (This was also the only way to fix my original problem, where the squares were not on their own row)

CodePudding user response：

Try this:

.container {
  display:flex;
  flex-direction: row;
}
.div-1 {
  width:20%;
  height: 50px;
  background-color: green;
}
.div-2 {
  width:50%;
  height: 50px;
  background-color: darkgreen;
}
.container-1 {
  margin-top: 20px;
  display:flex;
  flex-direction: row;
  justify-content:end;
}
.div-3 {
  width:60%;
  height: 50px;
  background-color: blue;
}
.div-4 {
  width:20%;
  height: 50px;
  background-color: darkblue;
}
.container-2 {
  margin-top:20px;
  display:flex;
  flex-direction: row;
}
.div-5 {
  width:20%;
  height: 50px;
  background-color: red;
}
.div-6 {
  width:50%;
  height: 50px;
  background-color: darkred;
}
.container-3 {
  margin-top:20px;
  display:flex;
  flex-direction: row;
  justify-content:end;
}
.div-7 {
  width:60%;
  height: 50px;
  background-color: purple;
}
.div-8 {
  width:20%;
  height: 50px;
  background-color: skyblue;
}

<div >
  <div >
  </div>

  <div >
  </div>
</div>

<div >
  <div >
  </div>

  <div >
  </div>
</div>

<div >
  <div >
  </div>

  <div >
  </div>
</div>

<div >
  <div >
  </div>

  <div >
  </div>
</div>

CodePudding user response：

*{
    box-sizing: border-box;
    padding: 0 1rem;
}
.box{
    display: flex;
    height: 10rem;
    width: 50%;
    margin: .2rem 16rem;
}
.odd{float: left;}
.odd .left{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.even{float: right;}
.even .left{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.left{
    width: 25%;
    height: inherit;
}
.right{
    width: 75%;
    height: inherit;
}
.first .left{background-color: #C9E265;}
.first .right{background-color: #7ED957;}

.second .left{background-color: #5DE1E6;}
.second .right{background-color: #00C2CB;}

.third .left{background-color: #FF5757;}
.third .right{background-color: #FF1616;}

.fourth .left{background-color: #CB6CE5;}
.fourth .right{background-color: #8C52FF;}

.fifth .left{background-color: #FFBD58;}
.fifth .right{background-color: #FF904D;}

<div >
        <div >
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
        </div>
    </div>