Member Avatar for Raisefamous

Hi,

Could somebody please advise me how to make this footer inside the red line. I have tride tagging the right part in <span align="right"> but it didn't help.

The only solution that i came up with is to make two seperate paragraphs and then just set the right one margin-top to -40 so it will be on the same height with the left one, but this is not he best option.

Please advise.

Thanx

  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Raisefamous

Dani AI

Generated

A few practical notes that build on suggestion and the original markup you posted, .

Using floats (what suggested) is fine, but a modern, simpler and more robust approach is to use flexbox: it keeps the two sides aligned, avoids negative-margin hacks, and handles vertical centering and responsive wrapping automatically. Also avoid deprecated attributes like align on <p> and invalid attributes like alt on anchors — alt belongs on images, not links. Use semantic markup and classes instead of inline styles.

Example (flexbox + semantic markup):

<footer class="post-meta">
  <div class="meta-left">
    <time datetime="2012-03-08">March 08, 2012</time> Posted by <a href="/author/someone">Someone</a>
  </div>
  <div class="meta-right">
    <a href="/post/123">Read More</a> | <a href="/post/123#comments">Comments</a>
  </div>
</footer>
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
@media (max-width: 480px) {
  .post-meta { flex-direction: column; align-items: flex-start; }
  .meta-right { margin-top: 6px; }
}

If you must support very old browsers, the inline-block or float fallback works — but remember to contain floated children (use a clearfix or overflow: hidden on the parent) so the parent keeps its height. A minimal clearfix:

.clearfix::after { content: ""; display: table; clear: both; }

Small accessibility/validation tips: mark the date with <time datetime="...">, give links descriptive hrefs (avoid #), use aria-label or visible text for screen readers, and avoid layout hacks like negative margins. For flexbox basics see the MDN guide: MDN flexbox basics.

Recommended Answers

All 4 Replies

Member Avatar for hericles

Are those two sections inside their own divs? if yes either use float: left; on the left one or display: inline-block; for them both.

If they aren't in their own divs can you post up the HTML so we can view it?

Member Avatar for Raisefamous

My code is the following.

<p align="left">March 08, 2012 Poseted by <a href="#" alt="Someone">Someone</a>
<a href="#" alt="More">Read More</a> | <a href="#" alt="comment">Comments</a></p>

But it just puts it on the left side, how do i seperate it in to two parts and put these parts on both sides like on the image?

Member Avatar for hericles

You can alter it to this:

<p>
<span style="float: left;">March 08, 2012 Poseted by <a href="#" alt="Someone">Someone</a></span>
<span style="float: right;"><a href="#" alt="More">Read More</a> | <a href="#" alt="comment">Comments</a></span>
</p>

The float left and right send each part to their appropriate edge.

Member Avatar for Raisefamous

It helped. Thank you.

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.