I'm trying to make a very simple website (still learning HTML) but stuck with the following.
How do I get the image not to overshoot the main area and overlap the footer and space beneath the website? So the image just needs to "create" white space in the main area, so it would fit perfectly.
Thanks brehs

have you tried turning it on and off again?

The images already have float elements. I'm just use <main> for the whole area between the footer and the top of the page. Do I need to put the image in a div or something?

put the image in a div/container, set the container size, then set the image to occupy 100% of the container.

hope that works. haven't touched html in a few weeks.

What is the code for that?

div
{
width:100%;
height:100px;
}
img
{
width:100%;
}

something like that. play around with the units till you get what works for your webpage. if that doesn't work you can post your code on codepen and we'll have a look.

Why not use flex box?

It gives you the best parts of floats but without the weird quirks and "hacks" that you sometimes need to make it display correctly.

Create a container for the two divs ([put the image in a div prob makes it easiest), give the container display: flex and maybe flex-wrap: wrap.

Then give the two inside divs flex: 1 1 50%. Or change the % to whatever you want. If you want margins between the divs then just add the css for that and drop the %s so that they two divs still sit side by side.

Flex box makes things scale nicely on different screen sizes as well. (No idea if floats do that correctly, as I have never used them)

You could also clearfix the parent element so it clears the child elements.

Without seeing the code that'd be my best suggestion.