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.
#2. Inline-block and percentage
We also can make this layout without floating effect using inline block and percentage like two columns.
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 🙂
How to place Text and an Image next to each other in HTML?
I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have.
How can I do this?
3 Answers 3
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn’t slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).