CSS layout problems

[wiser3]

Ok, after doing some CSS research i took another stab at trying to use CSS for layout. Here's my attempt:

http://www.trep4.com/_sis/

Why does my container shrink to the size of my sidebar? Naturally, i want it to be long enough to contain which ever column is the longest.

Also, on narrow screens the two columns overlap. Can i fix that? or at least get the screen narrower before it happens?

Overall my attempt at CSS layout isn't a complete failure but I still have some problems. Of course the general look/design of this site needs more work yet.

 

[Vragabond]

You're using absolute positioning for the main part and relative positioning for the sidebar. Absolutely positioned elements are taken out of the normal flow of the document and do not expand the sizes of their parent containers nor interact with any other code on the page. That's your whole problem. Absolutely positioned element does not push the container down and it will overlay other elements when there's not enough space for them.

I suggest you go for floating elements and then putting a clearing element at the bottom. That should work better than absolute and relative positioning.