positioning divs not working on more primitive browsers

[lAZLf]

On my website I made two divs inside another div. The container div is floating right, and one div inside it is floating right, and another is floating left. On the latest versions of safari, firefox, internet explorer and google chrome it works just fine. However, on more primitive browsers (i.e. browser on my blackberry or an old version of firefox for windows) they still float left and right, but one is above the other instead of being on the same level. (its on http://svidler.net/ if you want to see it)

 

HTML:

<div id="leftcontent">

<div class="left">
<a href="?page=contact" class="advert"><div class="adverttitle">advertise here</div></a><br />
<a href="?page=contact" class="advert"><div class="adverttitle">advertise here</div></a><br />
<a href="?page=contact" class="advert"><div class="adverttitle">advertise here</div></a>
</div>

<div class="right">
  
	<div id="login">
	<form action="login.php" method="post">
	<table cellspacing="0">
	<tr><td><input type="text" id="username"name="username"width="300" value="username" onFocus="emptythefield(); glow();" onblur="fillthefield(); glow();"/></td></tr>
	<tr><td><input type="password" id="password"name="password"width="300" value="password" onFocus="emptythefield2();" onblur="fillthefield2();"/></td></tr>
  	<tr><td id="submitrow"><input type="submit" value="login" class="btn"/></td></tr>
	</table>
	</form>
</div><div id="recentposts">
    <h2>Recent Posts</h2><br />
    <a href="index.php?type=comments&page=blogpost&id=19" class="recentpostlink">A rite of passage</a><br /><a href="index.php?type=comments&page=blogpost&id=18" class="recentpostlink">Portfolio page loading time shortened</a><br /><a href="index.php?type=comments&page=blogpost&id=17" class="recentpostlink">anonymously comment on anything</a><br /><a href="index.php?type=comments&page=blogpost&id=16" class="recentpostlink">design changes be gone!</a><br /><a href="index.php?type=comments&page=blogpost&id=15" class="recentpostlink">portfolio page and other stuff</a><br /><a href="index.php?type=comments&page=blogpost&id=12" class="recentpostlink">this is a test</a><br /></div>
</div>
</div>

 

CSS:

#leftcontent {
float:right;
width:540px;
display:table-cell;
}

.right {
float:right;
}
.left {
float:left;
}

 

 

 

Does anyone know why this might be happening?

[lAZLf]

For the record, I just noticed that i named the container div that floats right "leftcontent"...... I was never good with directions

[haku]

Increase the width of the container a little to see if both divs fit in. I know this will mean you will have a gap on some browsers, but identifying the specific issue is the first step towards debugging the problem.

[lAZLf]

I increased it to over 700px but still no luck. I'm sure the problem is elsewhere

[haku]

In your html, you have to move the div that is floated right above the one that is floated left.

[lAZLf]

That doesn't work either.