Float drop in firefox only in certain pages

[sidtej]

Hi,
I've been having a weird problem with firefox. I have a Content div which holds 2 divs which need to float next to each other(like 2 columns).In all my static pages it works fine but when i try to retrieve data as the height of one div increases the content in the otherr div drops down. I have tried a lot of things but couldn't find anything. Anyone please help me out.It only happens in firefox.

you can check it at

<snip>

When you first load it itll be fine but when you search for something the bug comes up :(

Here is the code

HTML
[codes]
<div id = "MainContainer">
<div id = "Header"></div>
<div class = "Spacer"></div>
<div id = "NavigationBar"></div>
<div class = "Spacer"></div>
<div id="Page">
<div id="PageHeading"><img src="../images/Search_Head.jpg" width="749" height="80" alt=" "/></div>
<div id = "PageInfo">
My Data is retrieved here
</div>
</div>
<div id= "RightBar">
<div id= "SearchBar">
<form id="form1" method="post" action="search.php">
I have my search form here....
</form>
</div>
<div class="Spacer2"></div>
<div id= "EventsBar">
<div id="EventsInfo">
Some events information
</div>
</div>
</div>
</div>
[codes]

CSS
[codes]
#MainContainer {height: 100%;min-height: 667px;width: 1000px;background-color:#99cc00;margin:auto;display:table;}
#Header {background-image: url(../images/Head_Bg.jpg);background-repeat: no-repeat;height: 100px;width: 1000px;}
.Spacer {height: 1px;width: 1000px;background-color: #FFFFFF;}
#RightBar {height: 100%;min-height: 335px;width: 240px;background-color:#99cc00;float: right;padding-top: 15px;padding-left: 10px;}
#Page {height: auto;width: 750px;float:left;}
#PageInfo {background-color: #FFFFFF;height: 100%;min-height: 335px;width: 700px;padding-left: 30px;padding-top: 20px;padding-right: 20px;padding-bottom:105px;background-image: url(../images/Page_Bottom.gif);background-repeat: no-repeat;background-position: bottom;}
#PageHeading {height: 80px;width: 750px;background-color:#FFFFFF;}
#NavigationBar {background-color: #3366CC;height: 23px;width: 980px;color: #CCCCCC;padding-top: 2px;font-family: Calibri;padding-left: 20px;}
#SearchBar {background-image: url(../images/Search_Bg.gif);background-repeat: no-repeat;height: 90px;width: 228px;padding-top: 40px;padding-left: 2px;}
#EventsBar {background-image: url(../images/Events_Bg.gif);background-repeat: no-repeat;height: 200px;width: 215px;padding-top: 40px;padding-left: 15px;padding-bottom: 10px;}

[edited by: eelixduppy at 6:47 pm (utc) on Feb. 12, 2009]
[edit reason] no URLs, please [/edit]

[sidtej]

I was able to solve the problem byt giving display:inline-block. Noe it works fine in Firefox 3 but it is messed up in firefox 2 :(

[tedster]

Welcome to the forums, sidtej. I'm glad you got it working and shared your solution. You were faster than we were!