I have a page and done slices from Adobe image ready.

Showing Divs like with position:abolute;left:value;top:value

when my body of page expand then body dissapear in Footer's div because its position:abolute.

I never use Div but tables any help?

 try using absolute position for body section div as well and if you using z-index then keep the body z-index higher than div

my Footer Css is

#LoginFooter
{
    position: absolute;
    left: 0px;
    top: 612px;
    width: 1000px;
    height: 158px;
    background-image: url('../Images/AdminPanel_04.jpg');    
}

Hi Imran,

If what I understood is correct, your static page which is containing images is not looking good when content increases.

Suppose if your original image is of the size 1024x768, when you use tools like ImageReady, it will divide them into multiple images(slices) of smaller sizes. When you save it as a webpage, what you get is a html file with embeded images. This means, it can hold only static content. When the length of page increases due to increase in data, your layout will be spoiled as you don't have images for the extended body.

For designing sites, what people generally do is, design images using tools like Photoshop and design layout using tools like Microsoft Expression web(This is a really excellent tool, which has evolved from Ms Frontpage 2003. It's CSS editor has improvised a lot!), Dream weaver etc. For the body, a suitable background color is applied or image is repeated using CSS. So even if your page length increases, the background image still repeats itself.

Try using Ms Expression Web. It should surely solve all your issues.

Hope this helps!

Please note that absolutely positioning an element will remove it from document flow. So normally if you place a div after another, it will automatically adjust its position after the upper div has consumed its desired space. But in case of absolutely positioned element it will not happen.

As you've in the #LoginFooter class. When the length of the content div increases 612px it will start overlapping with the footer.

So first of all don't position the footer at an absolute position. If at-all you want to set the minimum height of the "content" portion to be 612 px, why not you use min-height property on the content div and set the footer div position relatively.

Hope it helps.