Div content overlaps my footer and ticker div??

preview woonideeutrecht.nl/index3.php

in FF my div content overlaps the footer and ticker div. In IE i don't even see the whole div content. (I have a seperate .css for IE6)

Any pointers?

 

Classic example of why you should NOT use absolute positioning for layout (in MOST CASES).

Your footer has a "clear:both;" and I think your left nav is being floated, so it clears the left nav. However, because you absolutely positioned the right content division, it's "OUT OF FLOW" and what that means is basically elements coming after and before or anywhere act like the absolutely positioned element isn't there AT ALL.

This is probably a horrible analogy but pretend everything that isn't position:absolute; is on land. Anything that is position:absolute is flying on top. The cars, buildings on land don't pay attention to the flying machine because it isn't on land... it is on top of them.. (lets not count tall buildings).

Replace the rule you have for your #content with this... it should work

If you want to add horizontal (left and right) margins to your content division, then be sure to also add display:inline; which fixes double margins ONLY IN MSIE 6 and won't effect other browsers.

 

@soulscratch,

tx for thinking along i am gonna try your suggestion.

As of the absolute positioning, i assumed the following

Put container relative and position everything inside it as absolute. Why? So i can put the content first and header, menu and the rest after.

see: http://forums.digitalpoint.com/showthread.php?t=413294
and then point number 9.

 

It's NOT good to absolutely position dynamic elements such as nav (if you change your nav items constantly or they change depending on the section/page in your site) or content (because the amount of content is different for each single page).

Say you absolutely positioned your nav and content division. You know your nav is always 300 pixels high. But your content varies, and there is no (easy) way (without javascript) that you can have your footer going right below the content if the content was absolutely positioned.

I would say you should only absolutely position small objects like say a banner ad at the top of your header if your banner came later in the source code after your logo and header image/masthead.. then you could easily absolutely position it relative to the container (div id="header" in this case). You know that the banner will always be the same size and because of that it won't screw up like it did here.

So from now on I suggest you follow the trend and start using floats for dynamic elements like nav div and content div, if you want your footer to be at the bottom of either one easily. You can float both of them left and as long as there's space they will sit right next to each other. If the footer has clear:both it will appear below both.

 

hmm, your suggestion seems to work quit well. I just need some bottom margin, thanks for that.

I think i follow your analogy, (altgough i would be thinking the other way around, position: absolute is on land and relative is in the air, ) it clears things up a little bit for me.

But why the float: left for div content and not float: right, as my div mainNav float:left already?

And what if i want to do it my way. I have deleted all clear:both and also deleted the float's. I am trying to absolute positioning all the div's inside container. Except div nieuwsTicker which would resist after div content ends.

Because of the dropshadow fx i had to place div footer outside the div container.

ps: sorry cross post. I see what mean.

 

You can float right, but then the extra space remaining would be in the middle, and I just find it more organized if they're both side by side and the remaining space is on the right. It's just a personal preference.