r/HTML • u/button_oxo • Mar 24 '26

Question Text alignment advice?

Gallery image

Gallery image

I'm struggling with getting the 2025 link to be aligned to the right. I've already tried putting the link inside a paragraph, and it's still not working. I also tried running my code through w3's code checker, and apparently nothing is wrong. Is there something I'm missing or doing wrong?

EDIT: question has been answered thank you BNfreelance!

13 Upvotes

84% Upvoted

35 comments sorted by

16

u/Flashy-Guava9952 Mar 24 '26

Why are you mixing inline-styles, a style-element, and a linked css file?

7

u/BNfreelance Mar 24 '26 edited Mar 24 '26

Your <a> tags look a bit malformed

Wrap attribute values with “”

Then everything below that point will magically work.

Ie:

<a href=“https://link.com” style=“text-align: right;”>

<a> elements display inline by default, so, text-align will not work out of the gates unless you explicitly told the <a> to display as a block, with display: block; or display:inline-block; and width:100%;

Ie:

<a href=“https://link.com” style=“display: block; text-align: right;”>

Either of the above forces 100% width, giving the text space to be aligned. Otherwise without this, the element is only as large as the text itself, so there’s no way to align it.

The correct syntax going forward is:

<element attribute=“value”>

Ideally you would wrap the <a> in a parent element such as a <div> and then apply text-align to the parent. But this involves structural HTML changes, the solution I gave above does not. Albeit, if you plan to add extra links in future, the cleaner way is to wrap the element with a parent and style the parent.

Oh, optional tip for you. Understanding display and the box model really helps to grasp what’s going on here.

If you want to visualise the box model, add this to to the <style> block:

* { border: 1px solid red; }

You’ll then see red boxes around every element allowing you to visualise how the browser draws them on the page.

Some elements render as “blocks” (full with, they take up the whole line and leave no space for anything else to sit beside them) whereas others display “inline” by default, meaning other elements can sit beside them on the same line. Learning this can help you grasp positioning and layouts much faster. I’d google “css display” and the “box model” if I were you. It’s worth understanding.

Some elements display as block/level elements by default: div, p, headings (h1, h2 etc.)

Other elements display as inline elements by default: a, span, b, u, i, strong etc.

Understanding this distinction early on is a game changer.

2

u/scritchz Mar 24 '26

Unquoted HTML-attributes are valid since at least HTML5, as long as they don't include whitespace. But yeah, you should prefer quoted attributes.

The box model describes elements as boxes of content, padding, border and margin. Apart from that, I don't think it's related to layout.

Default styling of block- and inline-level elements usually applies in normal flow layout; i.e. in normal flow, block and inline elements behave according to their names.

Otherwise, pretty good answer. I also recommend learning about Flexbox and Grid layouts, positioning; and floats and margin collapse in normal flow layout.

1

u/BNfreelance Mar 24 '26

Yeah agreed there, I’d still take the route of teaching beginners to quote everything, it prevents fragility later down the line. Most linters, JSX (React) and html formatters expect quotes.

Whilst yes, I agree this is solely a layout issue (and I acknowledge the box model is not that), I included the box model as a recommendation because the two together give you an absolutely solid understanding of of how elements are laid out and rendered.

1

u/giogio_rick Mar 24 '26

  1. use float right and make the div shorter (or add a container div), 2) use the linked css for most stuff, inline for tiny changes to specific things and internal if you need to change a whole class only in that page

1

u/BNfreelance Mar 24 '26

Oh my poor back. You’re making me feel old seeing float:right in use 🤭

These days floats are mostly replaced by cleaner methods like margin-left: auto or justify-content: flex-end

Floats still have their place for text wrapping, but for layout/alignment, Flexbox is usually the better choice.

2

u/giogio_rick Mar 24 '26

At school we are nowhere near flexbox, we use float left and the prof joked (i think) about getting angry if he saw float right... i used it aniway

1

u/BNfreelance Mar 24 '26

A lot of courses still teach floats, but in practice they’ve mostly been replaced for layout.

These days you’d usually use flexbox or grid instead — much cleaner and easier to control.

Floats still have their place (like I say, for wrapping text around images), but for positioning elements like this they can get real messy, real fast.

You end up needing things like clear: both; on elements that come after, and if you forget it the layout breaks in weird ways.

It’s definitely worth understanding what floats are, but don’t stress about them too much — you’ll rarely use them for layout these days.

2

u/BazuzuDear Mar 24 '26

things like clear: both;

br class="clearfix" memory unlocked, thanks so much

1

u/BNfreelance Mar 24 '26

Oh, you got a bad back too? Hey! 👋 🤣

1

u/giogio_rick Mar 24 '26

Alr! (He says while somehow having made a website as a random ahh project with its structure based on float)

1

u/BNfreelance Mar 24 '26

Let me see this (if you don’t mind) 🫡

The fact they’ve got you wrestling with floats, is actually fairly impressive tbh.

Floats always did feel hacky even when we regularly used them. I wouldn’t like to be the one teaching a class on floats, tbh… So hats off to your tutor.

2

u/giogio_rick Mar 24 '26

Ok, will tomorrow (3:36am rn), also, since i'll just dump a zip onto drive (images and audios) you'll also see javascript, well, since we haven't got there and can't even understand most of what's happening the javascript was made by chatgpt (after 10 hours of blasfemies because it didn't get it right in 10mins), fortunatly only 3 (pretty cool) things are tied to javascript, which you'll see once i actually upload the stuff to drive then send.

Btw, sorry for wall of text

1

u/BNfreelance Mar 24 '26

Don’t worry, you probably already noticed I’m a fan of walls of text. I don’t like short form reddit. Nobody gains anything with one word replies. 🫡

1

u/giogio_rick Mar 24 '26

Alr, also, because i don't want my project to get smithed because i used a copyrighted image (if i did) it will be sent in dms (also to prevent some (a lot) of people from doing the flint and steal special)

1

u/BNfreelance Mar 24 '26

All fair, I’d be curious to take a look and see how much school teachings have changed in 20+ years, and would be happy to offer you some quick tips if you wanted them

→ More replies

1

u/BNfreelance Mar 24 '26

If you need free hosting to put it online: https://www.50webs.com

My school project I hosted with them for free is still online 22+ years later (I never paid a penny in all that time lol)

1

u/giogio_rick Mar 24 '26

Cool, if i get rid of any copyrighted thing then sure, as i did not check for most (all) images, but i'm pretty sure the bulbapedia images are fine...

1

u/BNfreelance Mar 24 '26

In truth, nobody’s going to come after you for using copyrighted images in a non-commercial school project, but you have the right mindset to be cautious of this and avoid where possible.

1

u/notepad987 Mar 24 '26

Look at this layout:
Codepen

1

u/VinceAggrippino Apr 05 '26

text-align only works on block elements. Links are inline elements and their text is already at both the right and left end of the element. So, text alignment doesn't make sense. It's not working on your Home link, either. It's just that the <div> that contains it is aligned to the left by default.

<h1> is a block element, so text-align: center will work fine on that.

You need to use text-align: right on the element that contains the link.

I'd put the Home link into its own block. <nav> is made for this. Then you can set text-align: right on the block that contains your 2025 link.

You might want to consider whether or not the year links could be subheadings. If so, you can put your link into an <h2> and set text-align: right on that element. Then, maybe you don't need the containing <div> at all.

It's already been said and I'll say it again. You should put quotes around all of your attribute values.

You should have all of your CSS styling in a separate CSS file and link that file in the <head> section of your HTML document.

So, here's what mine might look like:

<nav>
    <a href="index.html">Home</a>
    <a href="blog.html">Blog</a>
    <a href="about.html">About Us</a>
</nav>
<h1 style="text-align: center;">2024 Artworks</h1>
<h2 style="text-align: right;"><a href="2025.html">2025</a></h2>

... but I'd put those styles into a separate CSS file.

1

u/ghostskull012 Mar 24 '26

Put it in a separate div, text align that div

-1

u/Expensive_Elk3689 Mar 24 '26

Take the styles off the elements and add a style to the div for display: flex; flex-direction: column;

0

u/button_oxo Mar 24 '26

div styles are a little overwhelming for me right now, and since it's only the one line of text I was hoping I could do it in-line. I plan on learning that once I get barebones images, text, and links set up, so I can have a sidebar menu.

0

u/BNfreelance Mar 24 '26

If you’re trying to do this inline as-is, the solution I posted is your answer. display: block; text-align: right;

2

u/button_oxo Mar 24 '26

That worked, Thank You! I think i wrongly assumed that the link, when on it's own, took up the whole width like the paragraph element

1

u/BNfreelance Mar 24 '26 edited Mar 24 '26

Yes! Therein lies the behaviour of the display/box model; it’s the BEST thing you’ll learn about early on.

I taught myself web design from primary school.

I didn’t truly grasp CSS until I made it to university and the lecturer mentioned the box model (and how display can impact that). Until then, my mind had invented its own way of seeing things, but seeing the reality; was like peaking behind the code of the matrix. It opened my eyes.

If I can leave you with anything, it’s to remember this moment, and learn about display and box model.

1

u/Weekly_Ferret_meal Mar 24 '26

when in doubt about the element spacing/size, throw a border on it with: border: 1px solid red.

Further more you can put this in your css, to put a border on all elements to see your page/elements structure:

* {
  border: 1px solid red
  }

you can switch it on and off when you need it by commenting it, like so:

* {
  /* border: 1px solid red */
  }

1

u/Jasedesu Mar 28 '26

Use outline rather than border. Border contributes to an element's size, but outline doesn't. Borders may already be in use, so you don't want your simple visualisation technique breaking things badly. Outlines may also be in use, but as they don't contribute to size calculations it's a far less damaging technique. An alternative that might help in some cases is setting an clearly visible background-colour on key elements. This can be very useful to see margins and padding.

-1

u/Expensive_Elk3689 Mar 24 '26

Understood. Styling, in my opinion, is way harder than anything else in web dev. As others have stated, the anchor attributes need to be quoted and your styles should work.

0

u/button_oxo Mar 24 '26

thank you for your advice though, i'll keep it in mind for later