Image and Text Side By Side HTML CSS

This code showcases how to place image and text side by side in HTML and CSS. It utilizes CSS flexbox and media queries to adjust the layout. This code helps you create visually appealing web pages with text and images in a responsive format.

You can use this code in your website to present text and images side by side for better readability. It’s useful for creating engaging product descriptions and informative blog posts.

How to Create a Layout to Set Image And Text Side By Side Using HTML & CSS

1. First, create the HTML structure for images and text layout as follows:

<div class="image-left">
	<img src="https://source.unsplash.com/640x460?girl" alt="Text with image example">
	<div>
<h2> Text with Left Image </h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu, massa scelerisque ac, cursus et, sollicitudin a, orci.</p>
		<footer>(A dummy text)</footer>
	</div>
</div>

<div class="image-right">
	<img src="https://source.unsplash.com/640x460?beautiful" alt="Text with image example">
	<div>
<h2> Text with Right Image </h2>
		<p>Praesent in mauris eu tortor porttitor accumsan. Duis bibendum. Morbi non erat non ipsum pharetra tempus. Du is iaculis laoreet odio. Vestibulum id ligula porta felis euismod semper. Sed euismod. Maecenas id ante. Nunc pellentesque. Sed vestibulum. Integer in ante. Nunc elementum.</p>
		<footer>(Placeholder text)</footer>
	</div>
</div>

Replace the example images and text with your own content. You can change the src attribute of the <img> tag to link to your own images. Update the <h2> and <p> elements with your text.

2. To style our layout, we use CSS. You can include this in your HTML file within <style> tags or link to an external CSS file. Here’s the CSS code:

html
{
	padding: 0 1em;
	font-family: Calibri, sans-serif;
}

.cd__main{
    max-width: 720px !important;
}

img
{
	       max-width: 220px;
               height: auto;
}

.image-left, .image-right
{
	margin: 1em 0;
}

@media (min-width: 20em)
{
	.image-left, .image-right
	{
		display: flex;
		align-items: center;
	}

	.image-left img
	{

		margin-right: 1em;
		float: left; /* fallback */
	}

	.image-right img
	{
		order: 1;
		margin-left: 1em;
		float: right; /* fallback */
	}
	
	/* clearfix for fallback */
	.image-left::after,
	.image-right::after
	{
		content: "";
  	display: block;
		clear: both;
	}
}

@media (min-width: 30em)
{
	.image-left img, .image-right img
	{
		flex-shrink: 0;
	}
}

Test your layout on different screen sizes to ensure it’s responsive. You can adjust the CSS styles as needed to optimize the layout for your specific content and design preferences.

That’s all! hopefully, you have successfully created a layout to arrange images and text side by side using HTML and CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.