Alignment Problem

Another problem I had when creating my website was on the Location page. I have a large map which is embedded from Google Maps, to the right of this is a box with the address and a link to the website of the sister pub.

When I first embedded the the map it moved the box on the right down for no apparent reason, it looked like this;



I played around with different bits of code to try and align it correctly again, as well as putting it into a container div box. I knew that the margin property was used to move that particular element away from one surrounding it from either/all of the top, left, right, or bottom. I wasn't however aware that by using '-' you could move the div closer to another div. This is done with;



Having found the correct amount of pixels to move the div up by, I have now aligned it properly. Simply using 'margin-bottom' would not work for this as it would leave empty space below and extend the page. It now looks like this;