Question

For a live demo, visit my website @ http://hello-world.cu.cc .
Make sure to check out the homepage, the projects page and the comments page. Each of these pages has the same sidebar with different styles applied to it. This is to show you what I have tried and the problems it causes.

I am making a website which has a sidebar to the left and the main content to the right. The problem i’m having is to do with the sidebar. I have it floating to the left and this is fine untill i zoom in on the webpage and all of a sudden the sidebar moves position which wrecks up the whole layout. I’ve tried to fix this by setting the position of the sidebar to absolute and the position of the container to relative. Now this solves the zooming problem because when I zoom in now it stays in the same position. However, since the position is now absolute, the page doesn’t automatically get longer to accomodate the sidebar. The temporary solution I am using at the moment is to position the sidebar absolutely to fix the zooming problem and then adding a max height as well as overflow:auto to provide scroll bars that can be used to scroll the sidebar.

Answer 1

You have two things that seem to be causing problems.

• #header has min-width:100%
• #main has width:1100px

Fix those and you’ll be on your way.