我的其中一个段落不会与其他段落保持一致

Question

First time posting on here, but i've used this site countless times when looking for answers so hopefully another one can be provided for me.

My problem is as follows:

I have been trying to get all the text to float left and be in line(the title, the author, the description) however, the time does not want to seem to float left to match up with the rest. the "14 hours ago" simply only goes that far (as shown in the pic) when directed to "float left"

Here is my html and css:

HTML and CSS

The Problem

I am new to HTML and CSS, having recently started to teach myself it so any help would be greatly appreciated and apologies in advance if it is a stupid question haha!

Answer 1

First of all, do not put a block element inside a line element. In your case, you want to put <p> tag inside <span> . Always try to avoid it even though you can tweak it by css.

Then you maybe misuderstood float and text-align. Text-align should be the way to go in here in my opinion.

I would rework your HTML to be honest, one wrapper element like or

with two inner elements having a class to set their color would be probably better.

So I suggest something like this:

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

Then just set color and font size for author and time classes... If I got it correctly from your question.