CODEWITHSUNDEEP
htmlcsspositioncss-floatdivision
morep219
morep219

Reputation: 41

All the text appears on the top between divs

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 class="label">Akita Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  
  <div class="label">Cockapoo</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Corgi</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Shiba Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

Upvotes: 0

Views: 32

Answers (4)

Johannes
Johannes

Reputation: 67776

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 class="label">Akita Inu</div>
<div class="box-left"></div>
<div class="box-right"></div>


<div class="label">Cockapoo</div>
<div class="box-left"></div>
<div class="box-right"></div>

<div class="label">Corgi</div>
<div class="box-left"></div>
<div class="box-right"></div>

<div class="label">Shiba Inu</div>
<div class="box-left"></div>
<div class="box-right"></div>

Upvotes: 1

DCR
DCR

Reputation: 15685

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 class="label">Akita Inu</div>
    <div class="box-left"></div>
  </div>
  
  <div>
    <div class="label">&nbsp;</div>
    <div class="box-right"></div>
  </div>
</div>

<div class='container'>
  <div>
    <div class="label">Cockapoo</div>
    <div class="box-left"></div>
  </div>

  <div>
    <div class="label">&nbsp;</div>
    <div class="box-right"></div>
  </div>
</div>

Upvotes: 1

Said Taher
Said Taher

Reputation: 51

.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 class="label">Akita Inu</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>
  
  <div class="label">Cockapoo</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>

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

Upvotes: 1

isherwood
isherwood

Reputation: 61083

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 class="box-wrapper">
  <div class="label">Akita Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

<div class="box-wrapper">
  <div class="label">Cockapoo</div>
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

Upvotes: 1

Related Questions