I have a two column site. I am trying to stop using margins and paddings for spacing when I can do it other ways. So what I did was put position relative on the main div, then position absolute on the sidebar and content div so that instead of floating the two, I can simply use left: 0, right: 0 to move the sidebar to the left and the content to the right. It works fine. Problem is that the footer slides up to the header. It colapses under the relative positioned div. How do I get the parent div to hold the sidebar and the content area when position absolute takes it out of normal flow? What is the method for clearing them? any idea?
The footer moves up because it doesn't "see" the sidebar and content divs. Since those are positioned absolute (and indeed taken out of the flow), the main div also doesn't take them into consideration and so the main div will have a resulting height of 0.
I don't understand why you NOT want to float the content div and side div (and use margins and paddings). There's nothing wrong with that method -- if it's because you want more control/flexibility over switching both DIVs, then you can just solve that by switching float:left with float:right and vice versa.
Also, margins and paddings are actually meant for spacing, so not sure why you insist on doing it with other ways?
it's not that I insist on doing it the other way, it's just that I wanted to try another way. See if I could nail it down. In the end, I did end up floating it.
I don't understand why you NOT want to float the content div and side div (and use margins and paddings). There's nothing wrong with that method -- if it's because you want more control/flexibility over switching both DIVs, then you can just solve that by switching
float:leftwithfloat:rightand vice versa.Also, margins and paddings are actually meant for spacing, so not sure why you insist on doing it with other ways?