Arranging two spans to appear in a vertical column beside a thumbnail

My goal is to create a layout with a thumbnail, two pieces of information stacked underneath, and options floating to the right. I have attempted to achieve this using the following HTML and CSS:

span.author_name {
  font-size: 14px;
  vertical-align: top;
  color: #333;
  margin-left: 4px;
}

span.comment_tools {
  font-size: 14px;
  vertical-align: top;
  color: #939393;
  float: right;
  clear: both;
}

span.comment_tools a {
  color: #939393;
  -webkit-transition: color 500ms linear;
  -moz-transition: color 500ms linear;
  -ms-transition: color 500ms linear;
  -o-transition: color 500ms linear;
  transition: color 500ms linear;
}

span.comment_tools a:hover {
  color: #1a7bbf;
}

span.date_time {
  font-size: 14px;
  vertical-align: bottom;
  color: #939393;
  margin-left: 4px;
}

span.author_name em { vertical-align: top; }
span.date_time em { vertical-align: bottom; }
<div class="author_metadata">
  <img src="https://www.gravatar.com/avatar/7b3c9600bd9d213f52750ac083c1ac28?s=128&d=identicon&r=PG" height="32" width="32" />
  <span class="author_name">Thomas Russell <em>says</em>:</span>
  <span class="comment_tools"><a href="#">Edit</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Reply</a></span>
  <span class="date_time">14th December 2014 <em>at</em> 1:38 am</span>
</div>

However, when implemented, the date_time span appears slightly offset. How can I adjust my code to better align these elements, especially for use in a list of comments?

htmlcssposition

Answer №1

To enhance the layout, consider placing the .author_name and .date_time elements within a div#container. You can then transform the span.author_name and span.date_name into div.author_name and div.date_name respectively. Lastly, add display: inline-block and vertical-align: top properties to both img and the #container.

For CSS transitions, you do not need vendor prefixes except for transition, where -webkit- is required.

div.author_name {
  font-size: 14px;
  vertical-align: top;
  color: #333;
  margin-left: 4px;
}
span.comment_tools {
  font-size: 14px;
  vertical-align: top;
  color: #939393;
  float: right;
  clear: both;
}
span.comment_tools a {
  color: #939393;
  -webkit-transition: color 500ms linear;
  transition: color 500ms linear;
}
span.comment_tools a:hover {
  color: #1a7bbf;
}
div.date_time {
  font-size: 14px;
  vertical-align: bottom;
  color: #939393;
  margin-left: 4px;
}
div.author_name em { vertical-align: top; }
div.date_time em { vertical-align: bottom; }
img, div#left-container {
  display: inline-block;
  vertical-align: top;
}
<div class="author_metadata">
  <img src="https://www.gravatar.com/avatar/7b3c9600bd9d213f52750ac083c1ac28?s=128&d=identicon&r=PG" height="32" width="32" />
  <div id="left-container">
    <div class="author_name">Thomas Russell <em>says</em>:</div>
    <div class="date_time">14th December 2014 <em>at</em> 1:38 am</div>
  </div>
  <span class="comment_tools"><a href="#">Edit</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Reply</a></span>
</div>

Answer №2

You have the ability to:

  • Adjust the image alignment to float left
  • Transform .author_name and .date_time into block elements
  • Reorder .comment_tools
  • Apply margin directly to the image instead of .author_name and .date_time

.author_metadata {
  font-size: 14px;
  overflow: hidden;
}
.author_metadata > img {
  float: left;
  margin-right: 4px;
}
.author_metadata > span {
  display: block;
}
span.author_name {
  color: #333;
}
span.comment_tools {
  color: #939393;
  float: right;
}
span.comment_tools a {
  color: #939393;
  -webkit-transition: color 500ms linear;
  -moz-transition: color 500ms linear;
  -ms-transition: color 500ms linear;
  -o-transition: color 500ms linear;
  transition: color 500ms linear;
}
span.comment_tools a:hover {
  color: #1a7bbf;
}
span.date_time {
  color: #939393;
}
<div class="author_metadata">
  <img src="https://www.gravatar.com/avatar/7b3c9600bd9d213f52750ac083c1ac28?s=128&d=identicon&r=PG" height="32" width="32" />
  <span class="comment_tools">
    <a href="#">Edit</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Reply</a>
  </span>
  <span class="author_name">Thomas Russell <em>says</em>:</span>
  <span class="date_time">14th December 2014 <em>at</em> 1:38 am</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize th ...

javascriptcsstemplatesprestashopresponsiveness

Guide on removing the <hr/> tag only from the final list item (li) in an Angular

This is my Angular view <li class= "riskmanagementlink" ng-repeat="link in links"> <h3> {{link.Description}} </h3> <a> {{link.Title}} </a> <hr/> </li> I need assistance with removing the hr tag for the l ...

javascriptjqueryhtmlangularjs

How to continuously animate images in HTML using Bootstrap

I want to showcase 7-8 client images in a continuous loop using a <marquee> tag. The issue is that there is a gap between the last and first images. Here is the HTML code I have: <marquee> <ul> <li><a href="#&q ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issues with basic calculator implemented in HTML

Recently, I've been dabbling in HTML. My goal is simple - to create a form where users can input two numbers, add them together, and see the result in one of the input fields. Here are the two input fields: <input type="text" id="Nu ...

javascripthtmlcalculator

What is the best way to toggle the visibility of a div using a button? And how can you incorporate a visual effect on the button when

I'm trying to implement a button that can hide and show a div, but for some reason, it only shows the div and doesn't hide it when clicked. Check out my fiddle: http://jsfiddle.net/4vaxE/24/ This is my code: <div class="buttons" style="bac ...

jqueryhtmlcssshow-hideeffect

Adjust the size of the image to match the dimensions of the div

Whenever I try to adjust the size of the image inside the div element, it doesn't seem to change. The div itself functions properly, but the image remains fixed in size. Is there a way to scale the image proportionally when resizing the div? div.col ...

cssresponsive-designcss-positionimage-resizingbackground-position

Unable to input text into text fields or interact with buttons by clicking or hovering in a React form

I am new to React and currently working on a login page that asks for both a username and password. While I haven't implemented much logic yet, I have been exploring online resources to learn more. It appears that I should be able to interact with the ...

cssreactjshover

Show a div element once you reach the bottom of the webpage

I have successfully implemented a feature where the footer appears when scrolling up and disappears when scrolling down. However, I am now looking to make it appear when I reach the bottom of the page. Check out my JSFiddle here // Display Footer when at ...

javascriptjqueryhtmlcss

Guide on Disabling Horizontal Scrolling in a Website's Navigation Bar Using Bootstrap

Instead of disabling my horizontal scroll completely, I want to remove the scroll from specific elements like my NavBar. When I scroll, the Navbar moves along with it which ruins the design. I only want the horizontal scroll to be enabled for certain parts ...

htmlcssfrontendbootstrap-5

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

I have an index.html file and I wanted to link it to a twitter.ejs page. Unfortunately, my attempts were unsuccessful, and now I am considering changing the extension from ejs to html. However, this approach did not work either. Do .ejs files only work wit ...

javascripthtmlnode.jsexpress

How to insert a custom logo into a bootstrap navbar on a Ruby on Rails website

I have encountered a similar issue to this, but I haven't been able to resolve it. I am currently working on my first application using rails and bootstrap. I've successfully created a navbar with a name and two buttons (you can view the screensh ...

htmlcssruby-on-railsbootstrap-4navbar

Troubleshooting: Issues with CSS fixed positioning

Whenever I try to scroll down, my navbar moves along with the page. Even when I resize the window, it keeps shifting despite using position:fixed. What mistake am I making? nav li:nth-child(1) { position: fixed; border: 1px solid #15317E; font-si ...

csscss-position

Having trouble getting a Chrome extension/jQuery to work on certain sites but not others? Attempting to trigger an event when a link is clicked

For three different websites, I have three separate js files. I want to mention that the manifest has the correct settings to make sure these files work on the right sites, but unfortunately, only one function of the extension (the most important one) is n ...

javascriptjqueryhtmlgoogle-chrome-extension

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

I've been noticing a problem today while examining the source code on a website. I typically use PHP output in my templates to generate dynamic content. Initially, the templates are written in HTML only, with clean indentation and formatting. The PHP ...

phphtmlbrowser

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

Enhance your Bootstrap Progress Bar by incorporating the width value within the CSS using CoffeeScript or jQuery

I'm attempting to create a function where every time the button is clicked, the progress bar increases by an extra 12.5% out of the total 100%. (Therefore, eight clicks will complete the progress bar to 100%) Currently, it updates the text content bu ...

jquerycssruby-on-railstwitter-bootstrapcoffeescript

Chrome does not support gradient, while Firefox does

When I attempt to utilize the webkit gradient tag specifically for Chrome, it fails to function altogether. On the other hand, when tested on Firefox using background:-moz-linear-gradient(#000, #888);, it operates smoothly. Despite this, applying backgrou ...

htmlcssfirefoxgoogle-chrome

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

javascripthtmldomrangy