HELP - Quick HTML/CSS?

Question

Can someone please explain to me why the following HTML/CSS markup creates an unwanted gap at the bottom causing a scrollbar to appear?

Area GREEN

Area BLUE

Im trying to get the BLUE area to stretch to 100% height however with the GREEN area being 30px in height I expected the BLUE height to be 100% - 30px. This isnt the case. It appears the 30px is being added to the overall display causing the scrollbar to appear.

Im not interested in an overflow patch but a way to do something like 100% - 30px or something to get this display to appear as predicted. So far im guessing the good old TABLE tag must be used.

Answer 1

Try using

Answer 2

nicely if the image is arising and that's only pushing it down, it must be because of fact the image isnt an identical length. once you're nevertheless uncertain, you may edit the css. (supply the image an identity) #image2, #image1 { reveal: inline; } that would keep it from giving a wreck. Or, you may somewhat of a picture, make it a #identity of the div with the image { historic past-left: imagesrc; historic past-repeat: no-repeat; padding-left: edit the padding to circulate the text fabric over; } that would restore it as nicely otherwise, im no longer completely specific

Answer 3

Changing the heights to 6.2% and 93.8% gets a nearer result. But it is still not perfect.