Create list with title and image left aligned and text right aligned?

Question

I'd like to create a layout like the one in the image

What is the best and cleanest way create the layout in HTML and the cleanest way to do it in the CSS ? This what I have tried : codepen.io/hafsadanguir/pen/bZQLdL

Thanks in advance for your help :)

Answer 1

I think the best and the cleanest way to achieve result like what you're showing is by using Bootstrap. The following code is for structure like what you're showing as what I'll use for my own. Also by using Bootstrap you'll benefit responsive layout for multiple screens

HTML:

<div class="container" id="container">
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgOne"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgTwo"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgThree"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgFour"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
</div>

CSS:

#container {
  background: red;
}
.img{
  height: 50px;
  background: green;
}
#container .row {
  margin-bottom: 15px;
}
#container h1 {
  margin: 0;
}
#imgOne {
    background-image: url(#your_image_path);
}
#imgTwo {
    background-image: url(#your_image_path);
}
#imgThree {
    background-image: url(#your_image_path);
}
#imgFour {
    background-image: url(#your_image_path);
}

And by using a little bit of jQuery we can acheave a sharp square images containers:

$('.img').height($('.img').width());

Remember to add Bootstrap files in your document tag, from Here , And you'll need to tweak the design for your awn preferences.

A Bootply Preview from Here .