I need help debugging

[Kristiinatrix]

Hi, I'm very inexperienced in web design. I'm having trouble with my most recent web page. It works well in all the browsers I tested at home but then I learned that IE9 on Windows Vista can't place all the divs in the right place. The central part (tabcontent) gets pushed down and starts below the right menu. They are side by side on other browsers.

Why I have a problem: I tested it on IE9 on my computer at home and it looks perfectly okay! But when I used another computer, it looked bad.

http://www.ut.ee/plants/

I would copy the major part of the problem, but I don't know what's causing it. I've tried all that I can think of and I'm out of ideas. I tried different doctypes, but I couldn't get it to work with HTML5. I would do layout from scratch, but really, I can't even replicate the problem on my own computer! The website is a matter of pride and it's really bugging me that it doesn't work well.

PS! It's totally non-profit. It's a website for a scientific group. It still needs some work though.

 

[Phreaddee]

Float them both left.
Make sure to swap the divs order around. Have 0 margin + padding on the parent divs.
And then add via the children. That should resolve it.

 

[daviedR]

Float them both left.
Make sure to swap the divs order around. Have 0 margin + padding on the parent divs.
And then add via the children. That should resolve it.

Just as Phreaddee said, you should float both of them. It's the best practice to work with floating. By the way, your page looks fine in my IE9. I don't know what causing you the bad rendering in your IE9. However I inspected your page source and conclude,

.floatleft {
  width: 570px;
  float: left;
}

I meant, it's safe way that you set both div as floating element. Your current code doesn't float the class (.floatleft) it may cause you problem. CMIIW

 

[Kristiinatrix]

Pheaddee and DavidR,
Thank you for the advice. Expecially Pheaddee, you are amazing. I couldn't understand what you meant, at first. But then I fixed the floating issue. Then I had to change the order of the divs and then I had a problem with margin/padding of the parenting divs. I re-read these posts and then understood what I was supposed to do and all of it worked great!

Now I changed it and I'm hoping it will work. I will know on Monday when I vist the homepage on the right computer. Again, thank you.

 

[Phreaddee]

thanks. for the record it looks OK from my end.