All the text appears on the top between divs-CodePudding

I want to make the Akita Inu and Cockapoo labels just above box-left divs but instead most of the labels just stacked in the middle between divs. I tried to put two divs in one div like but it didn't work.

.box-left {
  clear: all;
  float: left;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-right {
  float: right;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

  <div >Akita Inu</div>
  <div ></div>
  <div ></div>

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

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

  <div >Shiba Inu</div>
  <div ></div>
  <div ></div>

CodePudding user response：

.box-container{
  display:flex;
  justify-content: space-between;
  min-width: 600px;
  min-height: 200px;
}
.box {
  width: 300px;
  height: 200px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 2px solid black;

}

 <div >Akita Inu</div>
 <div >
  <div ></div>
  <div ></div>
</div>
  
  <div >Cockapoo</div>
 <div >
  <div ></div>
  <div ></div>
</div>

If I understand what you're about to do, I think it will work very well with the style change.

CodePudding user response：

Don't use floats. They're an outdated and troublesome technique. Instead, use inline-block containers or flexbox.

.box-wrapper {
  display: inline-block;
  width: 600px;
}

.label {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.box-left {
  border: 1px solid black;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

<div >
  <div >Akita Inu</div>
  <div ></div>
  <div ></div>
</div>

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

CodePudding user response：

Use flex for this. Floats and absolutes should generally be avoided.

.label {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.box-left,
.box-right {
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.container {
  display: flex;
}

<div class='container'>
  <div>
    <div >Akita Inu</div>
    <div ></div>
  </div>
  
  <div>
    <div >&nbsp;</div>
    <div ></div>
  </div>
</div>

<div class='container'>
  <div>
    <div >Cockapoo</div>
    <div ></div>
  </div>

  <div>
    <div >&nbsp;</div>
    <div ></div>
  </div>
</div>

CodePudding user response：

Add clear: both to .box-left to put it below the floated item above it. And to put the labels below the divs above them, apply the same to .label

.label {
  clear: both;
}

.box-left {
  clear: both;
  float: left;
  border: 1px solid red;
  width: 250px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-right {
  float: right;
  border: 1px solid blue;
  width: 250px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

<div >Akita Inu</div>
<div ></div>
<div ></div>


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

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

<div >Shiba Inu</div>
<div ></div>
<div ></div>