For some reason, if I use line-height property and set it a little smaller, like 13px or so,
the main text always gets on the bottom div with it’s first line.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div.main{
background-color:grey;
width:500px;
height:100px;
text-align:justify;
line-height:13px; /* pfff */
}
div.pusher{
float:right;
height:40px;
}
div.bottom{
float:right;
clear:right;
height:60px;
width:100px;
background-color:green;
font-size:20px;
}
</style>
</head>
<body>
<div class="main">
<div class="pusher"></div>
<div class="bottom">
textaaaaa aaaa aaaa
</div>
We have yet, many other health products, as they are all beneficiary in some way, aroma therapy products can help you to get more relaxed,
relieve the stress and pain, they can help with a better sleep and even protect from mosquitos.
Our beverages are also completely natural, and will keep you fresh and in shape!
Everyone knows of the coffee benefits, the juices also have vitamins and are highly beneficial.
In the beverage section you can also find.
</div>
</body>
</html>
Any ideas?

I have managed to find the answer for this bug.
The height of the pusher needs to be multiple of line height. Eg. 39px;
In that case it will float text as intended. We can then make the bg transparent and put a litle padding to make it line-up better.