Flexbox Question

[Skhilled]

I am converting my Docskillz theme (SMF 2.0.17) to SMF 2.1 RC3. In the first link below, you'll see a spy glass next to the search box on the top right of the page.

https://www.docskillz.com/docs/index.php?action=forum;theme=3

The next link shows the RC3 theme that I'm working on. In this one, I'd like to add the spy glass in front of the search text box in the top section right. However, no matter what I do I can't seem to get it to stay put when the screen or browser resizes..

https://docskillz.com/smf21rc3/index.php

After 2-3 days of screwing around, I finally realized that I need to use a flex container. I found code that shows how to use it but am confused as to why it shows two ".flex-container" codes for one flex box as shown below as well as implementing them properly.

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox

[SychO]

a much easier and straight forward way of doing this, is to drop all styles from .search_icon and add only a:

vertical-align: middle;

and put the html code of the image right before the search input html code which is:

<input type="search" name="search" value="">

[SychO]

a much easier and straight forward way of doing this, is to drop all styles from .search_icon and add only a:

vertical-align: middle;

and put the html code of the image right before the search input html code which is:

<input type="search" name="search" value="">

[Skhilled]

Ah ha! Thank you, thank you, thank you!!!

As usual, I was being me and being to too precise with positioning. LOL Not sure why I always forget about using align. 

Thanks again!

[Ronald]

It's a learning lesson as you go forward. You'll get it done.

[Skhilled]

Oh yeah, and you know I don't give up too easily.