Position

[user4fun]

I just don't seem to grasp the position deal. Can you please clarigfy this? The sections are on top of each other instaed of under each other unless I use position:relative!! I am confused?Here is my HTML

<div id="page_detail_box"><div id="sublink_section"><!--STUFF></div><!-- ending sublink_section  --><div id="page_info"><!--STUFF--></div><!--Ending page_info --></div><!--Ending page_detail_box--><div id="end_detail_img"> </div> <!-- Ending with with final detail image -->

CSS

#page_detail_box{margin:auto;width: 929px;height: 59px; background:url("images/content_top.jpg") no-repeat;}#sublink_section{margin:auto;width: 90%;position:relative; top:22px;}#page_info{position:relative; top: 35px;background-image:url('images/content_back.jpg');background-repeat:repeat-y;}#end_detail_img{margin:auto;width: 929px;height: 8px; background:url("images/content_btm.jpg") no-repeat; }

The content btm is not showing up under the page_info? Am I undersanding the position system wrong?

[aspnetguy]

It looks like the only thing you are doing with the positioning is moving the boxes down a bit. The same thing can be accomplished with margin-top.It is possible that your sublink_section and page_info divs are now covering end_detail_img. When you position something relative (to it's current position) the other elements do not move to accommodate this.Try adding position:relative;top:57px; to your end_detail_img and see if it is visble now.

[user4fun]

#page_detail_box{margin:auto;width: 929px;[b]height: 100%; [/b] /*I made this to 100%*/background:url("images/content_top.jpg") no-repeat; z-index:7;}

Now the content_btm.png img shows up at the end where I want it, the only thing left is to stop the content_back.jpg img from repeating it self again after the content_btm img

[aspnetguy]

Do you have a live link I could look at to see what is going on?