How to Put Image Next to Text in HTML: CSS Alignment Methods

Which layout method should you use?

Three decisions to make before you write any CSS

Most alignment bugs are decided before the first declaration is typed. Settle these three questions first:

1. Does the text need to wrap around the image contour, or just sit beside it?True wrapping (lines shortening around the picture, then returning to full width) only comes from float. Everything else places two rectangles next to each other.
2. What must the source order be?Screen readers and keyboard focus follow the DOM, not your visual columns. Decide the semantic order once, then move pixels with CSS.
3. What happens at 320 CSS pixels?Every method in this guide needs a stacking fallback. Build that fallback first and the desktop row second.

How to put an image next to text in HTML: the basic markup

Placing an image next to text in HTML starts with browser display defaults for inline and block elements. By default the img tag behaves as an inline-replaced element, so simple text sits on the same baseline without any CSS framework at all.

A <div>, by contrast, is a block-level element: it starts on a new line and consumes the full available width. That single difference explains the most common beginner problem, where text drops below the image instead of sitting next to it.

<img src="example.jpg" alt="html image next to text" width="200" height="150">

<p>
  <img src="icon.jpg" alt="html image next to text" width="32" height="32">
  This text aligns next to the image on the same horizontal line.
</p>

<!-- Basic inline layout example -->
<div class="inline-container">
  <img src="thumb.jpg" alt="html image next to text" width="100" height="100">
  <span>Sample descriptive text rendered directly next to the image.</span>
</div>

<!-- Live visual preview component -->
<div style="border: 1px solid #ccc; padding: 12px; display: block; background-color: #f9f9f9; border-radius: 4px;">
  <img src="thumb.jpg" alt="Media thumbnail" width="60" height="60"
       style="vertical-align: middle; margin-right: 8px; background-color: #e0e0e0;">
  <span style="font-family: sans-serif; font-size: 14px; color: #334155;">Inline text positioned horizontally adjacent to the media element.</span>
</div>

/* Center the image against the middle of the lowercase text */
.inline-img-middle {
  vertical-align: middle;
}
/* Align the image top with the tallest element on the line */
.inline-img-top {
  vertical-align: top;
}
/* Explicit default: image bottom sits on the text baseline */
.inline-img-baseline {
  vertical-align: baseline;
}
/* Fine-tuned nudge for icon fonts and small badges */
.inline-img-nudge {
  vertical-align: -0.15em;
}

<p>
  <img src="icon.jpg" alt="Icon" class="inline-img-middle" width="24" height="24">
  This text is vertically centered with the image icon.
</p>
<p>
  <img src="icon.jpg" alt="Icon" class="inline-img-top" width="24" height="24">
  This text aligns with the top edge of the image box.
</p>

Use CSS Flexbox to align text next to an image

CSS Flexbox is the standard one-dimensional layout system for aligning text next to an image inside a shared wrapper. Setting display: flex establishes a flex container and hands you direct control over alignment, spacing and visual order, without breaking element flow.

Alignment in Flexbox is always declared on the container, never on the children. justify-content distributes items along the main axis; align-items aligns them along the cross axis. Remember that one rule and half of the confusion disappears.

/* Responsive mobile-first reflow */
.media-card {
  display: flex;
  flex-direction: column;   /* Stacked on phones */
  gap: 16px;
}
/* Switch to side-by-side on tablet screens and above */
@media (min-width: 768px) {
  .media-card {
    flex-direction: row;
    align-items: center;
  }
  .media-card img {
    width: 200px;
  }
}

.media-card-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.media-card-fluid .media-content {
  flex: 1 1 320px;   /* Wraps to a new line below 320px of available space */
}

.media-card {
  display: flex;
  align-items: center; /* Options: flex-start, center, flex-end, stretch, baseline */
  gap: 20px;
}

.media-card-reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 16px;
}
/* Order-based alternative, same DOM, different visual sequence */
.media-card-ordered { display: flex; gap: 16px; }
.media-card-ordered img { order: 2; }
.media-card-ordered .media-content { order: 1; }

Wrap text around an image with CSS float

The CSS float property pulls an image out of normal block layout so running text lines flow around its boundary. Modern structural layout belongs to Flexbox and Grid, yet floating is still the only technique that produces true text wrapping around images.

MDN is explicit that float was designed for magazine-style image wrapping and is not recommended as a general page-layout mechanism. That role now belongs to Flexbox and Grid.

.float-left-image {
  float: left;
  margin-right: 16px;
  margin-bottom: 12px;
  max-width: 100%;
  height: auto;
}

<article class="clear-container">
  <img src="illustration.jpg" alt="Diagram of a floated image layout"
       class="float-left-image" width="220" height="160">
  <p>
    This first paragraph wraps around the right-hand side of the floated image.
    Because the image has been removed from normal block flow, every line box in
    this paragraph is shortened by the image width plus its right margin.
  </p>
  <p>
    The second paragraph continues wrapping until the bottom edge of the image is
    passed, after which line boxes return to the full container width, exactly the
    behaviour you see in newspaper and magazine columns.
  </p>
</article>

/* Keep the float contained and readable on small screens */
@media (max-width: 600px) {
  .float-left-image {
    float: none;
    display: block;
    margin: 0 auto 16px;
  }
}

.float-right-image {
  float: right;
  margin-left: 16px;
  margin-bottom: 12px;
}
.clear-container {
  display: flow-root; /* Establishes a new block formatting context */
}
/* Legacy-compatible fallback if flow-root support is a concern */
.legacy-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Arrange image and text with CSS Grid

CSS Grid gives you a two-dimensional layout framework for web pages. Grid earns its place when media elements and textual content must line up precisely across explicit columns and rows inside structured page components.

<div class="grid-container">
  <img src="banner.jpg" alt="html image next to text" width="200" height="200">
  <div class="grid-text">
    <h2>Grid section title</h2>
    <p>Grid structures two-dimensional content across strict columns and rows.</p>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr;   /* Single column on phones */
  gap: 24px;
  align-items: start;
}
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 200px 1fr; /* Fixed media column, fluid text */
  }
}

.grid-named {
  display: grid;
  grid-template-areas:
    "img"
    "content";
  gap: 20px;
}
@media (min-width: 768px) {
  .grid-named {
    grid-template-areas: "img content";
    grid-template-columns: 220px 1fr;
  }
}
.grid-named img { grid-area: img; }
.grid-named .grid-text { grid-area: content; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Auto-fit responsive media grid without a single media query */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.responsive-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;   /* Preserves proportions inside the cell */
}

How to position text over an image (text overlay)

Side-by-side is not the only intent behind “image and text together”. Hero headers, promotional cards and photo captions often need text drawn on top of the image. That is the one legitimate use of absolute positioning here: a positioned container plus absolutely positioned text layers.

<div class="image-overlay-container">
  <img src="hero.jpg" alt="Mountain landscape at sunrise" class="overlay-media"
       width="1200" height="600">
  <div class="overlay-text centered">
    <h2>Card headline</h2>
    <p>Text rendered over the media graphic.</p>
  </div>
  <div class="overlay-text bottom-left">Bottom left</div>
  <div class="overlay-text top-right">Top right</div>
</div>

.image-overlay-container {
  position: relative;      /* Positioning context for the text layers */
  width: 100%;
  max-width: 600px;
  text-align: center;
  color: #ffffff;
}
.overlay-media {
  width: 100%;
  height: auto;
  display: block;          /* Removes the inline descender gap */
}
.overlay-text { position: absolute; }
.centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bottom-left { bottom: 8px; left: 16px; }
.top-left    { top: 8px;    left: 16px; }
.top-right   { top: 8px;    right: 16px; }
.bottom-right{ bottom: 8px; right: 16px; }

Three practical requirements for accessible overlays:

.overlay-text h2 {
  font-size: clamp(1.1rem, 4vw, 2rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

Use position: absolute for text overlay elements only. For side-by-side positioning, stay with Flexbox or CSS Grid. When the same captioned stills later become motion assets, the sequencing notes in how to create a video with pictures keep the safe-area margins consistent with your web layout.

1. Contrast.Text over photography rarely passes WCAG contrast on its own. Add a scrim: background: linear-gradient(transparent, rgba(0,0,0,.6)); on a wrapper, or background-color: rgba(0,0,0,.45); on the text layer.
2. Decorative versus informative media.If the headline lives in the HTML, the photograph behind it is usually decorative, and alt="" is then correct. If the image itself carries meaning, describe it.
3. Small screens.Absolutely positioned text does not reflow. Scale font-size with clamp() and test at 320 pixels so the overlay never overflows the image box.

Add accessible image text with src and alt attributes

Accessibility and search visibility both lean hard on accurate image markup. Large-scale automated audits show how widespread the failure still is:

When adding images, hold to these standards:

• Always supply a valid pathway in the src attribute, and export web-optimised formats (WebP, JPEG, PNG) so the layout is never blocked by oversized files.
• Write descriptive text in the jpg alt attribute that conveys the operational context of the image. WCAG technique H37 requires the alternative to carry the same meaning, including any important words rendered inside the graphic.
• Reserve empty alt text (alt="") for purely decorative graphics, so assistive technology can skip them.
• Keep alt text useful and contextual rather than keyword-stuffed. Google's image SEO guidance treats over-optimised alt strings as unhelpful.

For hosting and delivery, see how to create a permanent asset URL for robust CDN delivery.

During one accessibility review (illustrative composite, not a client disclosure), a team found roughly 1,200 dynamic media cards shipping without alternative text. The fix was two-part: an automated DOM validation script in continuous integration, plus stricter CMS field requirements for editors. Missing-alt regressions stopped reaching production after that. Teams automating this kind of repetitive audit often script it with lightweight assistants, and how to create ai agents covers the guardrails such a helper needs: a defined owner, limited access, an audit trail and a shutdown path.

Common HTML and CSS mistakes when placing text next to image

4. Using absolute positioning for basic side-by-side alignment. Applying position: absolute to place a text block beside media breaks document flow and produces overlapping text on narrow screens. Clarification worth repeating: absolute positioning is the wrong tool for side-by-side layouts and the right tool for text overlays drawn on top of an image, where the parent carries position: relative.
5. Relying on empty-space hacks. Repeated non-breaking spaces ( ) or hard-coded pixel margins instead of CSS gap produce brittle web pages and unpredictable text formatting.
6. Mixing float inside a flex container. Floats do not intrude into a flex formatting context, so float: left on a flex item silently does nothing. One layout model per component, please.
7. Forgetting the inline image descender gap. An <img> inside a container leaves a few pixels below it because it sits on the text baseline. Fix with display: block, vertical-align: middle, or line-height: 0 on the parent.

Refactoring legacy HTML image alignment attributes to CSS

Legacy codebases, CMS templates and HTML email layouts still lean on presentational attributes to align images next to text. align, hspace, vspace and <br clear> arrived in the HTML 3.2 era and were deprecated in HTML 4.0. Browsers still render many of them, but modern standards expect CSS equivalents. Keep this table nearby when you inherit old markup:

Two behavioural notes worth remembering during migration:

• align="middle" only ever placed one line of text beside the middle of the image. Remaining lines dropped below it, which produced the jerky layout old tutorials warned about. vertical-align: middle reproduces that same single-line limitation, so move multi-line content to Flexbox instead.
• hspace applied the buffer to both horizontal sides at once, which made flush-to-margin images impossible. Individual CSS margins (margin-right only) finally solve that constraint.

Before refactoring at scale, wrap every converted block in a regression test or visual diff. Legacy attributes frequently masked missing clearing rules, and the breakage surfaces in a different section of the page than the one you edited.

FAQ: quick reference for image and text alignment