<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.

Recommended Answers

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 …

Jump to Post

All 2 Replies

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.

Or float the image class to the left

Be a part of the DaniWeb community

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