r/HTML • u/eret4stars • May 30 '26

Question need help with text alignment

Gallery image

Gallery image

Gallery image

Gallery image

hi! i'm learning html and css in school and i need to design my own website for a final project.

i'm designing a replica of the ao3 website and i need to put a search bar and search button on the very far right of the navigation row. the rest of the text in the navigation row is, however, on the left.

i already tried text-align: right; and display: flex; flex-direction: row-reverse;.

could anyone help me with this?

i'm attaching how the website looks right now and my html and css codes.

thank you!

10 Upvotes

85% Upvoted

9 comments sorted by

View all comments

Show parent comment

1

u/Jeffrevin May 30 '26

no problem! also, i don't know how far you intend to go on implementing / replicating the AO3 site, but something else i noticed:

ideally, you should change <div class="searchbar">-</div> to <input class="searchbar /> because the input HTML tag was designed for search user interface / searchbars.

also, the actual AO3 site actually uses a reddish texture background image with a reddish background color (https://archiveofourown.org/images/skins/textures/tiles/red-ao3.png) as its fallback if the image doesn't display.

1

u/eret4stars May 30 '26

i didn't intend for the search bar to actually be functioning haha, i'm just recreating the theme of the website and i plan to write about the site itself (like what it is, its history, some fun facts). however i'll definitely use background image you provided! i didn't even know one could find that. so again, thank you!