The code about to be described can make pixel perfect content placement possible.
Say you have two images, like the two images below:
But, you want them to be on top of each other to form a cross like the one below:
How did I do that? Magic, you say? Nope, all I did was add a couple of <div> tags. Here is the code:
|
<div id="top" style="left: 500px; top: 485px; position: absolute"> <img src="/img_articles/8470/image1.gif"> </div>
|
First, you must give your div a name, which the id attribute does. The style attribute will define the position of the whole layer of content the falls inside the <div> tag. There are only a few things that you have to remember:
- The left function positions the image x number of pixels from the left of the browser to the left side of the image.
- The top function positions the image x number of pixels from the top of the browser to the top of the image.
- Remember to put position: absolute in because if you do not, the position will default to the position: relative setting which is more difficult to work with and can cause some varying placements in different browsers.
That's all you need to know. Layer it up!
More HTML and CSS: 
