Image and Text Side By Side HTML CSS

Image and Text Side By Side HTML CSS
Code Snippet:container for image and text
Author: Gunnar Bittersmann
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 4,861
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X