I am having problems with these relative positions - i thought they are relative to the containing div - but i must be doing something wrong.


But - i can not get the 2nd and 4th divs to position opposite the headings.
eg alongside the Agency name: i want to position the input box which has the initial value of Private.

and alongside Your refference i want the other input box (div4)

I have set them both at top:0 and stii they are about 40px lower than where i want. I thought that top:0 would be relative to the containing div (layer3)
but it doesn't seem so ??

here is the code:
thanks again if you can put me straight
HTML Code:

<!-- START OF LAYER 3 -->
<div id= 'layer3' style='width:260px; height:250px; background-color: #ffff00;width:260px;position:absolute;left:10px; top:300px;' >
<center><b>For Agents Use.</b></center>
<div style='width:240px;position:relative;left:10px; top:20px;' >
Agency name:<br>
<span class="det1">If you are acting as an agent for the company -
please put your agency name. If not, leave as 'Private'.</span>
</div>


<div style='width:200px;position:relative;left:120px; top:0px;' >
<input type="TEXT" name="x_agent" value = "<?php echo $N_agent ?>"
size = '15' maxlength='40'/>
</div>

<div style='width:240px;position:relative;left:10px; top:20px;' >
Your reference:<br>
<span class="det1">If you have several adverts running
you may want to use reference numbers. You can use numbers or letters. (optional)</span>
</div>

<div style='width:200px;position:relative;left:120px; top:0px;' >
<input type="TEXT" name="x_opt_yr_ref" value = "<?php echo $N_opt_yr_ref ?>"
size = '15' maxlength='20'/>
</div>

</div> <!-- END OF LAYER 3 -->

<div>s are a block element so have an implied line feed before and after them.
to align them side by side you either need to float them ( float:left | right | none) or use display:inline depending on what will work best for your design.

so - none of you guys know how this works ????

well maybe we thought you could see for yourself

you have a container 260px wide then in it there is a block element 240px wide and one 200px wide. So your maths are a bit off there.

<div>s will not sit adjacent each other unless you follow the steps outlined in my first post.

So what have you tried up to now ?

i thought they are relative to the containing div

They are, but there are other things that will affect positioning too.

It's also not generally necessary to position EVERY single div on a page. Position what you must and use source order to let the content in the page flow.

Put in a wrapper with a defined width that will enclose all your other elements. Make it position: relative. Then see where the rest falls without positioning inside it. Absolute positioning takes that div OUT of the document flow. Why are you absolutely positioning Layer3 ??

Thanks for your help.

I didn't realise hat I could 'overlay' a div ontop of another one.

any way ı got rid of two of the dives and ended up with a nice layout.

thanks again.