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?.
In this example we have two elements inside a container ? img and div element with h2 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 🙂
