Get div to appear below another (Positioning. Not layer order)

I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks.

Try adding clear: both; to your footer's class:

Thanks, I tried that and the footer just sticks itself right at the top of the page.

That's odd... What positioning are you using for your content div?

Absolute. All my div's are absolute. Code is below:

#page_content_holder_sizing {
background-image: url(/site_images/pre_load/page_content_background.gif);
background-color: #ffffff;
width: 729px;
height: 559px;
min-height: 559px;
position: absolute;
top: 140px;
left: 35px;
padding-left: 150px;
padding-right: 24px;
padding-top: 45px;
padding-bottom: 20px;
text-align: justify;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
z-index: -1;
}

They all use absolute... except the footer. You used relative positioning for the footer, which won't work because relative is "relative" to it's normal place in the flow. Take out the relative positioning from the footer, or try making it absolute like the rest of the page. Let me know how that turns out.

Is there compelling reason to use AP? From what I've seen, static or relative should do as well.

cheers,

gary

Could someone please have a look at www.milleniumhygiene.co.uk and view the page source and give me a clue as to where my footer should be to get the clear:both to work? The source code is commented and you will find the footer at the bottom of the source. Thanks! I need this to work and I cant get it to work :-(

Sorry to bump but I cant get this working and I cant put the site live without it...anyone?

For whatever reason, the main content area of the page does not render for me in Moz or Firefox. You might want to see if that is reproducable, especially with the expected migration from IE. I was also unable to find the footer in the source.

The {clear: } attribute determines whether a block element will appear at the same level as a float element. It is designed to avoid conflicts where elements might overlap. It does not, to my knowledge, apply to AP ({position: absolute;}) elements. Since everything else is AP, I would expect a {float: right} element to be at the top right of the page. However, you have confused the issue by giving the same footer element AP {bottom: 0; left: 35px;} which would suggest that it's at the bottom of the page 35 px from the left edge.

Your design is wonderfully clean and attractive, especially for so mundane a commercial service. It is obvious that you are a skilled graphic designer. You're waiting for the "but," aren't you? Here it comes. But, the coding shows a lack of understanding of the semantic and structural nature of html. The css illustrates the tyro's infatuation with absolute positioning and a poor grasp of the concept of flow.

This page could and should be refactored to use semantic and structured html. The display properties should be coded using no AP elements (well, maybe one small one), which among other things will facilitate resizing and variable content. That means more code is re-usable.

I'm sure that's not the answer you wanted, but it's the best I can do for you.

cheers,

gary

Rereading my last post, I seem a bit smart a——ed. Here is what I'm talking about, a refactoring and the stylesheet.

cheers,

gary

No its fine Its the first site I have attemtped to layout solely in CSS - although the content frame still had to have tables so still getting to grips with it...the PHP is sound behind it though lol.