Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?
Here's a variety of CSS layouts that should do exactly what you want:
You're probably looking for #4 under the fixed or fluid layouts.
This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:
#right
{
float:right;
width:18em;
}
#body
{
margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}
Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Пример</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
#menu{
width:250px;
float:right;
background:#FFC597
}
#info{
min-width:350px;
background: red;
}
#footer{
height:20px;
min-width:600px;
background:#B9CC8A;
clear:both
}
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
<div id="menu">MENU (side bar)</div>
<div id="info">INFO (central pane)</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Not tested (yet), but I think I have found the solution to the problem.
http://www.alistapart.com/articles/holygrail/
This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).