IE positions left sidebar below content

Question

Hello, I am not familiar with this website but I am desperately seeking help with the website I am building. I'm sorry if I'm not in the right place or asking my question incorrectly, so please tell me if I do something wrong!

I have built a simple website, consisting of four pages (index.html plus three others). In FF everything seems to work fine, but in IE it doesn't. I know there are a lot of similar problems, but after hours of searching I cannot find a solution. I have a sidebar on the left, which in FF appears in place, but in IE comes up below the content. The strange thing is that on the fourth page it does work, so I'm lost as to if it is a css or html error on my account. For the time being the website is to be found at http://www.kids2move.nl/djctapas

I hope there is anyone out there that sees what I have done wrong and how I can fix it. I will check this page regularly so I can add additional information if needed, like my css-file or the htmlcode. Thanks in advance!!

Answer 1

Why don't you put the sidebar div into the page div?

Answer 2

You currently have:

<div id=page>
    <div id=content></div>
</div>
<div id=sidebar></div>

I think:

<div id=page>
    <div id=sidebar></div>         
    <div id=content></div>
</div>

would make much more sense layout-wise and may possibly fix your problem. If not, play around with position: absolute; of the sidebar div and margin-left of the content div in the CSS.

Answer 3

I agree; try moving the sidebar div up a level.

The difference with the photo page is a side effect of the extra entry div I think.

If you get the firefox extension "Web Developer" you can use that to display how your divs are nested. (information/display div order)

Answer 4

Thanks a lot for the quick replies! I used and changed a free css template, because I haven't worked with html/css for a few months.. So it seemed easier to start this way. The order of the divs is copied from this template. I am going to try and see if it makes a difference!

Answer 5

You guys are great!! It seems to work!! Feels stupid not to have noticed it myself, I need to learn more about the logics of html ;) Would be easy if I could find a thing like this myself.. Anyway thanks a lot!

Additional question: do you recommend me changing the order of the divs in the photopage as well? Like akaDruid says, it works without.. but it seems better to change it as well.