How do you arrange the position of div tag containers in Dreamweaver?

Question

I'm only a beginner and having a right nightmare trying to solve this problem...

I've learnt how to place images within Div tags and then use padding to position them on the page correctly but my design for the homepage uses an image that needs to "overlap" the top of a main image container. see here:

http://www.flickr.com/photos/94004189@N00/3940935169/sizes/l/

The only way I can think of solving this is by making two div tag containers next to each other for the main product shots and have the larger one on the right come higher.

The problem is Dreamweaver wont let me position a div tag in this way or rather I don't know how to tell it to. it always inserts the new div tag in the middle of my link div tags. See here:

http://www.flickr.com/photos/94004189@N00/3940935669/sizes/o/

As I say I'm very new to this and am probably going about it in the wrong way. Please can someone shed any light on the best way to do this?

Many Thanks

Answer 1

If you need to OVERLAP images, you have to use absolute positioning for the divs and set the z-index CSS property:



div#image_one {

width: XXpx;

height: YYpx;

position: absolute;

top: YYpx;

left: XXpx;

z-index: 1

}



You have top | left | bottom | right to use.



Ron

Answer 2

Div tags won't do all for you, they are like containers for the information. You use them to separate diffrent sections of your website/design and you give them id's like

and after that you use CSS to move thous div's where you want them or in what shapes, colors etc. And in CSS you refer to them like div#main { margin:auto; background-color:#ff0000; } and so on..

Answer 3

to position div you need to style it..



example of overlapping two divs

This is my first div

This div will overlap div 1 number of pixels