[HELP] with placing images on a character sheet - CSS and HTML coding

I am a TOTAL novice at HTML and CSS but pretty good at reverse engineering but this one has me stumped. I apologize for my lack of skills in this area, I only started coding 2 weeks ago, and know this is probably a simple thing for most of you.  I have an image that is 184 x 665, it is in HitHub, and i have the proper URL for the image I want to place it on a specific page of the character sheet I want it to resize to a width of 140 and let it auto adjust the height I want on the right side of the page directly under a previous  fieldset I have looked at other character sheets and it seems to be done different ways. Research on the internet says it is best to use CSS for images and as little coding to HTML as possible. I was able to get it to place on the correct page and resized it using HTML style="width:140px" but I do not have the slightest idea how to get it placed exactly where I want it on the page under Hit Location fieldset that is a box of the same width. The character sheet I am working on is the GURPS (sheet #1) I want to place this under the Hit Location box and also named Damage-Reduction as defined in the CSS and the HTML code (I did nto code this, this was doen before my time). Here is the current results: Thanks for any help I can get (I am so out of my league right now) Mike

Hey Mike. Hopefully I can point you in the right direction! The first thing you want to do is wrap your image in a <div>. Think of of div like a frame that you put a picture or a block of text in. The frame lets you hang the picture anywhere you like. Information on div.  Give your div a class name like this <div class="hit_location"> Next use css to define the div class and make it float to the right ( Info on float ): .sheet-hit_location { float: right; } Finally, use CSS to set your image width and height. .sheet-hit_location img { width: 184 px; height: 665 px; }

OK,&nbsp; I got a lot closer thanks to Kirsty The Width setting, as I changed it to 140px so it would shrink the image, did nothing at all. If I use style="width:140px" in the HTML code - that shrinks it to the size I want. Problem is still the alignment to the right and staying directly under the Hit Location Repeating section So I do not know what this code does, in CSS,&nbsp; (if anything); .sheet-hit_location img { width: 184 px; height: 665 px; } Here is the code I have; HTML (which is placed right after the entry for the Ranged Attacks Repeating Section) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="speed-range-table"&gt; &lt;!-- .speed-range-table image--&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src="<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/GURPS/Images/Speed_Range_Table.PNG" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/GURPS/Images/Speed_Range_Table.PNG</a>"&nbsp; style="width:140px" alt="GURPS Speed\Range Tabke" /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;!-- .speed-range-table image--&gt; CSS .sheet-speed-range-table { &nbsp; &nbsp; &nbsp;float: right; } .sheet-speed-range-table img { &nbsp; &nbsp; &nbsp;width: 140 px; } Example: Sheet is real ugly if there are only a couple of rows in each Repeating Section, then the Speed-Ranged-Table image is directly UNDER the Ranged Attacks Repeating Section. This is what it looks like when opening a brand new character sheet:

So after I posted this with screen shots, I figured out how to make the placement correct. It was the exact placement of the HTML code that did it. Once I figured out where it NEEDED to be, it worked perfectly Thanks Kirsty for your help in all of this. Mike

I'm glad you got it sorted, Mike! If you need any more assistance, I'm happy to help.

Thank you so much Kirsty This community really rocks!