Member Avatar for feblioz

<div id="user-bar">
<div id="user-options">
<div class="notification-container">
<img src="media/gear-faded.png">
</div>

<div class="notification-container">
<img src="media/courses-faded.png">
</div>

<div class="notification-container">
<img src="media/chat-faded.png">
</div>
</div>

<span class="profile-container">
<img src="https://openlearning-cdn.s3.amazonaws.com/feblioz-avatar-24-ts1330811171.jpg" alt="" border="0" class="profile-image" align="absmiddle" width="24" height="24" id="myAvatar24">
<span>feblioz</span>
</span>
</div>

anyone knows how to make all the images to be in one line? the images are all pretty small.

  • 3 Contributors
  • 2 Replies
  • 96 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

The icons are in separate block-level containers, so they stack by default. suggested the inline-block approach and suggested floating — both work but can introduce unwanted gaps, baseline alignment issues or clearing hassles. A modern, robust option is to make the parent a flex container so the children line up horizontally and stay vertically aligned.

Here is a minimal CSS example that keeps the icons on one line, centers them vertically, and controls spacing:

.icon-row {
  display: flex;
  align-items: center;
  gap: 8px;        /* space between icons */
  flex-wrap: nowrap; /* keep everything on one line */
}

.icon-row img {
  width: 24px;
  height: 24px;
  display: block;  /* removes baseline gaps from inline images */
  object-fit: contain;
}

Practical troubleshooting notes:

  • If icons still stack, check for a rule forcing each child to be full width (e.g., width:100% on the notification div). Make sure the parent selector above targets the actual wrapper used in the markup.
  • If wrapping is acceptable on small screens, remove or change flex-wrap; to force a single line keep flex-wrap: nowrap and allow horizontal scrolling if needed.
  • Avoid obsolete HTML attributes on images (for example the old align usage). Prefer CSS for alignment and add explicit width/height to prevent layout shifts. Also include appropriate alt text for accessibility.

Flexbox is well supported in modern browsers; for legacy environments the inline-block/float techniques mentioned by and serve as fallbacks. For reference, see the MDN guide on Flexbox and the MDN img element notes: MDN Flexbox basics and MDN HTML img element.

Recommended Answers

All 2 Replies

Member Avatar for hericles

If you need each image to be in a div give the divs a CSS class that they share. For that CSS class set

display: inline-block;

This will your divs, and the images inside them, along the same line. Block level elements such as divs do not line up beside each other but stack down the page. Using display:line-block tells the divs to stop that and line up across the page.

Member Avatar for simplypixie

Or float the image class to the left

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.