Hello World! I have to apologise in advance as I have little knowledge about divs' and CSS positioning techniques so I might ask a lot of questions! I have built websites in the past but have relied solely on tables for layout but I think I'm ready for change now... I'm having some trouble trying to position a couple of divs in the right places and I have no idea how to solve this.

Here is the page I am working on: http://tester45.co.cc/

and here is my stylesheet: http://tester45.co.cc/style.css

One of the problems is that the sidebar seems to be out of position in IE7 (probably all the versions of IE too - I've only checked the site on IE7 and FF3). It seems like #leftside is positioned inside of #container and I'm not sure why.

Another problem is the footer... I have to scroll down to see it and I do understand it is because I have set #container to a 100% height and the footer is outside of the container, but when I try to put it in the container, the footer ends up just underneath the last line of contents - this is fine if the content reaches or exceeds the height of the browser but when it doesn't, #footer doesn't stay at the bottom of the page. I've tried the 'bottom: 0; position: absolute;' method but this doesn't work if the browser is resized

Any help would be great.

maybe try
in your footer tag

position: relative;
bottom: 30px

For the sidebar problem, put all your content in a container div that specifies 100% width. If that skews things too much in the other browsers, put that rule in conditional comments just for IE.

tim

Originally Posted by Webtechi

maybe try
in your footer tag

position: relative;
bottom: 30px

Thank you!! This works - it does hide the last line of the content in the container when it exceeds the browser height but I'm happy to use line breaks

Originally Posted by serandfae

For the sidebar problem, put all your content in a container div that specifies 100% width. If that skews things too much in the other browsers, put that rule in conditional comments just for IE.

I don't understand - put all the content (sidebar + container + footer) into another container? Also, I have no idea how conditional comments work! but, I will look into it.

EDIT: I think the sidebar problem is solved - I added left:0 to #leftside and it seems to have done the trick. Just got to test on other browsers...