How to align image and text side by side in HTML?

To align an image and text side by side in HTML, you primarily use CSS properties like float or position.

The most common and straightforward method, especially for having text wrap around an image, is to use the CSS float property.

Using the CSS float Property

This technique involves applying the float property to the image element within your HTML structure. When an element is floated (e.g., float: left), it is taken out of the normal document flow and pushed to the specified side, allowing other elements (like text) to wrap around it.

According to the reference, you can use the float property to position images and text side by side. This code will make images float to the left with a 10-pixel margin between the image and text, and make the text flow around the image.

How it Works

1. Target the Image: Select the <img> tag or a container holding the image using CSS.
2. Apply float: Set the float property to left or right to position the image on that side.
3. Add Margin: Use CSS margin properties (e.g., margin-right for a left-floated image, margin-left for a right-floated image) to create space between the image and the surrounding text.
4. Clear Float (Optional but Recommended): If subsequent content should not wrap around the floated element, use the clear property on a following element or container to stop the text flow.

Example: Image Floated Left

Here's a practical example using float: left:

HTML Structure:

<div class="image-text-container">
  <img src="your-image.jpg" alt="Description of your image">
  <p>
    This is the text content that will appear next to the image. 
    It demonstrates how the text flows around the floated image. 
    We can add more text here to show how it wraps naturally below the image 
    if the text block is longer than the image height.
  </p>
</div>

<div class="clear"></div> <!-- Optional: Use a clearing div if needed -->

<p>This text is below the floated section and does not wrap around the image.</p>

CSS Styles:

.image-text-container img {
  float: left;         /* Floats the image to the left */
  margin-right: 10px;  /* Adds space to the right of the image */
  margin-bottom: 10px; /* Adds space below the image */
}

/* Optional: Style for clearing float */
.clear {
  clear: both; /* Stops content from wrapping around the floated element */
}

In this CSS, float: left; places the image on the left. margin-right: 10px; ensures there's a 10-pixel gap between the image's right edge and the text next to it, as specified in the reference. margin-bottom: 10px; adds space below the image, which is also good practice.

Using the position Property

The reference also mentions using the position property. While position can place elements anywhere on the page (absolute, fixed, relative, sticky), it's generally less suited for simply placing text alongside an image in a flexible way where text wraps naturally. It's more for specific overlays or fixed placements. For creating a layout where text flows around an image, float is typically the preferred method among these two mentioned.

Comparison of Methods (Float vs. Position for Side-by-Side with Text Wrap)

Feature	float	position (e.g., absolute)
Primary Use	Flowing content around elements	Precise element placement, overlays
Text Wrap	Yes, text flows naturally	No, text does not flow; may overlap
Document Flow	Taken out of normal flow, but affects surrounding content	Taken out of normal flow, no effect on surrounding content layout
Complexity	Relatively simple for basic wrapping	More complex for text flow scenarios

(Note: Modern CSS layout methods like Flexbox and CSS Grid are also widely used for creating side-by-side layouts, offering more control and flexibility, but the reference specifically highlights float and position.)

Using the float property as described above, especially float: left; with an appropriate margin, is the direct way to implement the side-by-side image and text layout mentioned in the provided reference.