macx
6/22/2015 - 5:11 AM

Flexible element floating

Flexible element floating

Flexible element floating.markdown
content_copyfile_download
  • Rendered
  • Source

Flexible element floating

Don't write CSS for floated images for every size you need any more. Just use this approach to align your media – left or right.

A Pen by David Maciejewski on CodePen.

License.

index.html
content_copyfile_download
<div class="l-box">
  <h2>Left floating elements</h2>
  
  <div class="m-asset">
    <img src="http://dummyimage.com/50x50/f00/fff" alt="">

    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Hoc non est positum in nostra actione. Prioris generis est docilitas, memoria; Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Duo Reges: constructio interrete.
      </p>
    </div>
  </div>
  
  <div class="m-asset">
    <img src="http://dummyimage.com/100x50/f00/fff" alt="">

    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Hoc non est positum in nostra actione. Prioris generis est docilitas, memoria; Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Duo Reges: constructio interrete.
      </p>
    </div>
  </div>
</div>

<div class="l-box">
  <div class="m-asset m-asset--right">
    <h2>Right floating elements</h2>

    <figure>
      <img src="http://dummyimage.com/160x90/f00/fff" alt="">
    </figure>

    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Hoc non est positum in nostra actione. Prioris generis est docilitas, memoria; Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Duo Reges: constructio interrete.
      </p>
    </div>
  </div>
</div>
style.css
content_copyfile_download
.m-asset {
  display: inline-block;
  vertical-align: top;
  
  > img,
  > figure {
    display: inline-block;
    float: left;
    margin: .1em 1em 1em 0;
   }
  
  > div {
    overflow: hidden;
  }
}

.m-asset--right {
  > img,
  > figure {
    float: right;
    margin: .1em 0 1em 1em;
  }
}




/* Default styling stuff */

.l-box {
  float: left;
  width: 45%;
  margin: 0 20px 0 0;
}

p {
  margin: 0 0 1em;
}

h2 {
  font-weight: 300;
  margin: 0 0 .5em;
}
styles
content_copyfile_download
<link href="https://rawgit.com/macx/labs-defaults/master/dist/main.min.css" rel="stylesheet" />