CODEWITHSUNDEEP
htmlcss
Lewis
Lewis

Reputation: 2178

Phantom top margin on float left

I'm having a little trouble with floating my elements. I have some phantom margin that has appeared on my 3rd col element; as seen in the image below;

enter image description here

I have tried adding; box-sizing: border-box; but this doesn't help either. Is there something I am missing?

Code

#f-wrap {
  position: relative;
  width:100%;
  margin: 0 auto;
}
.row {
  display: inline-block;
  width: 100%;
}
.col {
  display: inline-block;
  float: left;
  width: 45%;
  margin: 2em 1em;
  background: #f0f;
}
<section class="ctre s-f">
  <div id="t-wrap">
    <div class="row">
      <div class="col">
        <img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
      </div>
      <div class="col">
        <h3 class="f-h">Related Links</h3><br/>
        <ul>
          <li class="f-lnk"><a href="">Home</a></li>
          <li class="f-lnk"><a href="">About us</a></li>
          <li class="f-lnk"><a href="">Products</a></li>
          <li class="f-lnk"><a href="">News</a></li>
          <li class="f-lnk"><a href="">Contact us</a></li>
          <li class="f-lnk"><a href="">Recycle</a></li>
          <li class="f-lnk"><a href="">Site map</a></li>
        </ul>
      </div>
    </div>
    <hr class="style-two"/>
    <div class="row">
      <div class="col">
        <h3 class="f-h">Social</h3><br/>
        <ul>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
        </ul>
      </div>
      <div class="col f-txt">
        <h3 class="f-h">Find Us</h3><br/>
        MGI Technology<br/>
        <br/>
        <a href="#" class="f-btn">MAP</a>
      </div>
    </div>
  </div>
</section>

Any assistance I can get with this would be greatly appreciated...

Update: Have now tried vertical-align:top; and removed float:left. Issue persists.

Temporary Live Example

Upvotes: 1

Views: 109

Answers (1)

dippas
dippas

Reputation: 60553

your snippet is not showing any issue but anyhow, but it seems that's due to by default inline-block is vertical-align:baseline, so you must set to vertical-align:top

plus remove unnecessary float:left 

#f-wrap {
  position: relative;
  width:100%;
  margin: 0 auto;
}
.row {
  display: inline-block;
  vertical-align:top;
  width: 100%;
}
.col {
  display: inline-block;
  vertical-align:top;
  width: 45%;
  margin: 2em 1em;
  background: #f0f;
}
<section class="ctre s-f">
  <div id="t-wrap">
    <div class="row">
      <div class="col">
        <img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
      </div>
      <div class="col">
        <h3 class="f-h">Related Links</h3><br/>
        <ul>
          <li class="f-lnk"><a href="">Home</a></li>
          <li class="f-lnk"><a href="">About us</a></li>
          <li class="f-lnk"><a href="">Products</a></li>
          <li class="f-lnk"><a href="">News</a></li>
          <li class="f-lnk"><a href="">Contact us</a></li>
          <li class="f-lnk"><a href="">Recycle</a></li>
          <li class="f-lnk"><a href="">Site map</a></li>
        </ul>
      </div>
    </div>
    <hr class="style-two"/>
    <div class="row">
      <div class="col">
        <h3 class="f-h">Social</h3><br/>
        <ul>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
          <li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
        </ul>
      </div>
      <div class="col f-txt">
        <h3 class="f-h">Find Us</h3><br/>
        MGI Technology<br/>
        <br/>
        <a href="#" class="f-btn">MAP</a>
      </div>
    </div>
  </div>
</section>

UPDATE:

Looking at your live site, the issue is that the other col has another class f-txt which has a property font-size:8pt and with that, change the height of the column.

So either you apply the same class to the first .col or remove that property

Upvotes: 3

Related Questions