<divs> repositioning themselves on a somewhat random basis

[methos]

Ok, this is one weird problem... strangely enough, the div's in my code mis-behave and mis-place themselves all over the page, all on a somewhat random basis, ie, refreshing the page a few times will result in different outputs.. :( the site in question is here (http://methos2.skarz.co.uk/hunters/), and ive enclosed some prictures to help explain what im saying...

what the page is supposed to look like:
http://img468.imageshack.us/img468/4214/noproblem4js.th.gif (http://img468.imageshack.us/my.php?image=noproblem4js.gif)

sometimes just the bottom right five showing the map of Cantha misbehaves shifting itself down:
http://img468.imageshack.us/img468/8036/problem11es.th.gif (http://img468.imageshack.us/my.php?image=problem11es.gif)

sometimes the whole div containing both of the map divs shifts down and replaces itself under the content:
http://img468.imageshack.us/img468/5914/problem27gj.th.gif (http://img468.imageshack.us/my.php?image=problem27gj.gif)

and sometimes the main content div, and the maps shift themselves down and left under the side bars:
http://img74.imageshack.us/img74/7778/problem38cb.th.gif (http://img74.imageshack.us/my.php?image=problem38cb.gif)

all my code is valid (well, the xhtml has warnings/errors because i am using the color=".." tag, but that should affect the divs, its in a <hr> tag and i cant figure out a way to put it in css, as using the css color:#...; doesn't seem to work)

any ideas what would be causing this?? thanks...

[VIPStephan]

Am I seeing right? This is Firefox you are using, huh? Well, I don't have any problem. The page looks exactly as it should, even after reloading 5 times.

As to the horizontal rule: Different browsers have different behavior for coloring this element. Firefox will only do what you want if you apply a background color.

[methos]

yes, i am using Firefox, sorry, i forgot to mention it within the previous post. As for the refresh option, strangely enough i have just done that myself and no problems occured. Although clicking on home or any other link a few times certainly does produce a problem, especially on the larger content pages such as guild history...

[VIPStephan]

Indeed, you're right! It does happen. Hmm... don't know for sure but it could be a width problem. I found a typo in your CSS, maybe it's this? You have a class selector called .mapholder in your CSS but in the HTML it is an ID. So the properties aren't gonna be applied.

And the display: table; is to avoid the collapsing of the div I suppose? Have never done this before and don't know if this might be the problem? I always clear my floats with a footer but since you don't have one the not quite desirable but easy solution would be to add <div class="clear">&nbsp;</div> before the closing tag of the container div (holder) and add this in your CSS:

.clear {clear: both;}

[methos]

Ah, thanks for the typo, fixed. That would be what is making the maps appear horizontal, now they should always be held vertical atleast :)
as for the clearing, i added that, and removed the display: table; (it was a previous addition to stop the div collapsing when it had too little content in, so i set it to a minium height, but that didn't work so someone told me to put that it) although now it's removed all the problems seem to have gone! Thank-you very much for all of your help VIPStephan! :)