One of the paragraphs refuses to align with the others by floating left

Greetings everyone! This is my first time posting here, although I have been a regular visitor looking for answers on this site. Hopefully, someone can assist me with my current issue.

Let me explain my problem:

I've been attempting to align all the text horizontally (the title, author, and description), but I'm having trouble getting the "time" to float left like the rest of the content. No matter what I try, the "14 hours ago" only goes so far (as shown in the image) before it doesn't align properly when set to "float left".

Below, you can find my HTML and CSS code:

HTML and CSS Code

View the Problem Image

As I am relatively new to HTML and CSS and am self-teaching myself, any assistance would be greatly appreciated. Thank you in advance, and sorry if my question seems silly!

htmlcsscss-float

Answer №1

Initially, it is advised not to nest a block element inside a line element. In this scenario, consider placing the <p> tag within the <span>. It is preferable to avoid this practice, even though adjustments can be made using CSS.

There might have been some confusion between float and text-align. For this situation, utilizing text-align would likely be the most effective approach.

It could be beneficial to revamp the HTML structure by incorporating one wrapper element such as a <div> or <p>, with two inner elements assigned distinct classes to manage their color effectively.

Consider implementing something along these lines:

<div class="news-section">
  <img src="..." alt="..." />
  <h3>Your news title</h3>
  <div class="header">
    <span class="author">John Doe</span><span class="time">10 hours ago</span>
  </div>
</div>

Subsequently, define the color and font size for the author and time classes accordingly... Assuming I have grasped your query correctly.

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

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

cssinternet-explorercss-animationsmicrosoft-edge

What is the difference between using min-height in vh versus % for the body tag

I'm trying to understand a code where the min-height of the body element is set to 100vh after previously defining the height of the html element as 100%. Why is there a need for this specific sequence? body { position: relative; overflow: hidd ...

htmlcss

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

htmlwebgoogle-font-api

What is the best way to align a div of variable size in a container of variable size using CSS?

My website features a 3-level structure that consists of a "workingArea" and an "imageContainer" within it, containing an image. <div class="workingArea"> <div class="imageContainer"> <img class="theImage" /> </div> </div> ...

cssweb-applicationscentering

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I am in the process of developing a website that compares different products. I have implemented code that retrieves and scrapes data for comparison when a user performs a search. Right now, I am using an ajax request for each company (currently 6 compani ...

phpjqueryhtmlajax

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

htmlcsstwitter-bootstrap

Display the text above overlapping div elements

I need a design where one div overlaps another, but the text inside the overlapping div must still be visible. <div class='box1'> <div class='sendAbove'> This message should remain visible in this div </div> ...

htmlcss

The issue I encountered with Angular's Mat-Select component is that the openedChange

When a user opens the mat-select, I am attempting to set CSS style using custom code. However, I am encountering an undefined error. Upon checking in the console, I noticed that the panel value is returning undefined. Can someone please advise me on how to ...

htmlcssangularangular-material

Struggling to align my image in the center while applying a hover effect using CSS

Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...

javascripthtmlcssweb

Tips for resolving CSS issues in a vast style sheet

I'm currently facing a challenge with modifying the CSS of a Wordpress plugin I need to utilize. The learnpress.css stylesheet is very extensive, spanning over 2000 lines, making it quite complex to comprehend. All I am trying to achieve is a simple t ...

cssgoogle-chrome-devtoolsbackground-color

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

javascripthtml

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

I currently have a CSV file located on a web server that is regularly updated with numeric and string data of varying lengths. I am seeking a solution to calculate the total byte values of each row when reading the file, as the byte count is crucial due ...

javascriptajaxhtml

Utilize jQuery method in HTML to perform parsing operation

Is it possible to invoke my jQuery function from within my HTML code? Here is the code snippet: HTML section: <td style="text-align:left;" align="left" > <div id="bulletin-timestamp" > doTimeStamp(${bulletinTimeStamp[status.index ...

javascriptjqueryhtml

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

htmlangulartypescript

Image hover effect displayed when hovering over an image

Is it possible to create a hover effect using purely CSS when hovering over an image, like in this example: https://i.sstatic.net/jjAWm.jpg I've come across several similar examples online, but they all seem to rely on jquery or javascript. I'm ...

htmlcss

Using JQuery to append elements and then locate them with the find method does not produce the expected

Hey there, I'm having trouble inserting one DOM element into another. It's something I've done many times before successfully, but for some reason it's not working this time and I can't figure out why. Currently, I am using an Aja ...

javascriptjqueryhtmlcssajax

Enhancing Images with Dynamic Captions Using JQuery

I have created a code to add image captions to different div blocks, and it works as intended. However, I am looking for ways to optimize the code and make it shorter. If you have any advice on how to improve it, please let me know! Thank you in advance. ...

jqueryhtmlcss

Determining the position of the selected option in an Angular 2 Select menu

Is there a way to retrieve the position of the selected option in a similar manner to the index of a table? Example for a table: <tr *ngFor="let car of cars; let i = index" (click)="showTabs(i)"> <td>{{i+1}}</td> </tr> I am lo ...

htmlangular

Tips for choosing a specific quantity and adjusting its value

Just starting out with Ionic 3 and looking for some help with the code. Can anyone assist me in understanding how to change the value of an item in a shopping cart and have the subtotal reflect that change? cart.ts private _values1 = [" 1 ", "2", " 3 "," ...

javascripthtmlangulartypescriptionic-framework