CODEWITHSUNDEEP
csscss-float
Damien
Damien

Reputation: 4319

Floating divs not laying out properly

i'm floating left a bunch of divs but for some reason they are laying out all weird. I trying to do rows of 4, but it's pretty random. I'll get row of 3, then 4, then 1. Row of 1 then 4. Not sure why this is happening and would appreciate the help. Here's my code:

.pdfs {
  width: 22%;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}
.pdfs:nth-child(4n+5) {
  clear: both
}
.pdfs img {
  width: 100%;
}
<div class="pdfs">
  <a href="/assets/site/docs/vet.pdf" target="_blank">
    <img src="/assets/site/img/vet.png" />
    <br />Veterinarian</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/platform-catalog.pdf" target="_blank">
    <img src="/assets/site/img/platform-catalog.png" />
    <br />Contact Platform Catalog</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/brochure.pdf" target="_blank">
    <img src="/assets/site/img/brochure.png" />
    <br />Portanti Brochure</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/study.pdf" target="_blank">
    <img src="/assets/site/img/diagnostic-equipment/img/study.jpg" />
    <br />Pachachu Study</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/paper.pdf" target="_blank">
    <img src="/assets/site/img/diagnostic-equipment/img/paper.jpg" />
    <br />AddiPen Paper</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/presentationubm2015.pdf" target="_blank">
    <img src="/assets/site/img/zqmppt.jpg" />
    <br />ZQM in Dinners of Exterior Segment Pathing</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/pen.pdf" target="_blank">
    <img src="/assets/site/img/flyer.jpg" />
    <br />Pentt Product Flyer</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/equipment.pdf" target="_blank">
    <img src="/assets/site/img/eguipment.jpg" />
    <br />Direction Equipment</a>
</div>

Upvotes: 0

Views: 29

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

The basic problem is the margin caluation...if you don't get it exactly right then your floats get misaligned.

Your parent div is 860px wide.

The internal divs (each row) take up 88% (756.8px). See it's already messy.

Now that leaves 12% or 103.2px to spread between 5 gaps (4 divs remember) but side margins don't collapse so you're actually dividing by 8 (1 + 2 + 2 +1) so each margin should be 103.2px / 8 = 12.9px.

BUT, that doesn't allow for broswers to deal with rounding (and they all do it differently so we'll say 12.75px for safety.

Messy isn't it...but there's an easier way...set the margins in %.

Then it's just 12%/8 = 1.5%...and let the browser do it's own thing.

Which way you chose is up to you.

Percentage Demo

* {
  box-sizing: border-box;
}

.wrap {
  width: 860px;
  margin: auto;
  border:1px solid grey;
  overflow: hidden;
}

.box {
  width: 22%;
  height: 50px;
  background: red;
  float: left;
  /* margin calculation */
  /* div widths total 756.8px*/
  /* room available = 103.2px*/
  /* number of gaps = 8 */
   margin:10px 1.5%;
}
<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Pixel Demo

* {
  box-sizing: border-box;
}

.wrap {
  width: 860px;
  margin: auto;
  border:1px solid grey;
  overflow: hidden;
}

.box {
  width: 22%;
  height: 50px;
  background: red;
  float: left;
  /* margin calculation */
  /* div widths total 756.8px*/
  /* room available = 103.2px*/
  /* number of gaps = 8 */
   margin:10px 12.75px;
}
<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

Related Questions