CSS weekly #2: An image on the left, text on the right

Image on the left and text on the right is a common pattern but don’t use it too often and when one of friends ask me how she could make this I couldn’t say it right away. But it’s an easy question, a beginning level with several methods. So let’s take a look at how we could solve “an image on the left and text on the right”.

#1. Float and inline

In this example we have two elements inside a container — img and div element with h1 and p elements inside it. float: left is an old and simple method. This method allows your text to float around the image. Medium uses this method.

.container {
  &__image {
    width: 250px;
    float: left;
  }
  &__text {
    display: inline;
  }
}

#2. Inline-block and percentage

We also can make this layout without floating effect using inline block and percentage like two columns.

.container {
  &__image {
    display: inline-block;
    vertical-align: top;
    width: 46%;
  }
  &__text {
    display: inline-block;
    width: 46%;
    @media (max-width: 620px) {
      width: 100%;
    }
  }
}

We need to add vertical-align: top to position the image on top. Make the width of each element smaller than 50% to prevent line-break.

#3. flex-box

Make this layout using flexbox. Don’t forget to include object-fit: contain to prevent image stretching and like with float: left we need to position the image on top by using align-self: flex-start.

#4. Grid

Yes we also could do it using Grid layout but to me it’s like to crack a nut with a sledgehammer, so, see you next week :-)