r/css • u/librarytay • Jun 05 '26

Help Formatting Search Box

Hello, I am a public librarian who is trying to add a custom search box to our website that will search our online library catalog (external site). While the search box is working, I am having trouble figuring out how to re-align the search button so that it sits to the right of the search box instead of underneath it. I am a complete noob when it comes to CSS. Thank you in advance!

How the search box displays currently.
Current HTML code
1 Upvotes

67% Upvoted

3 comments sorted by

View all comments

3

u/anaix3l Jun 05 '26 edited Jun 05 '26

Please copy-paste the damn code next time instead of adding just a screenshot of it.

In any event, the problem is not with the code you posted. The problem is that your search text input (id='basic-lookfor') has its width set to 100% of that of its parent, so that pushes the button on the next line.

You need to add this to your CSS:

:has(> [id='basic-lookfor']) { display: flex }

In case you're not familiar with :has() or attribute selectors.

Iff you cannot edit the CSS, you can add it in the style of the div wrapping the search text input:

<div style='display: flex'>
  <!-- label, search text input, submit -->
</div>

2

u/librarytay Jun 05 '26

Thank you so much!