浮动布局出现的问题

浮动布局是存在这种问题的，当窗口缩小后右边的部分会被挤到页面底部。这个问题该怎么解决呢？

例如：
<div class="left"></div>
<div class="right"></div>
css:
.left{float:left;background:red;height:300px;width:300px;}
.right{float:right;background:blue;height:300px;width:700px;}

解决方法是：将左右两部分网页的宽度设置为百分数。

左边：width:30%;

右边：width:70%;

 

今天在设计网页时遇到了一个难题，大半天的时间才搞明白，左右网页部分采用的是百分数的宽度，里面的元素用的宽度是绝对宽度，但是在窗口缩小时，右边元素总是被挤到网页下面，或者连滚动条也没有，看不到隐藏的部分。

找了半天，才知道问题所在：html:overflow:hidden; 是这句代码，让缩小之后的窗口的部分元素隐藏，看不到滚动条。将这具代码去掉，刷新网页：OK。

 

好不容易把网页调好了，在firefox里看了一下，结果网页右部一个form表单被挤到了与它平行的表格下面。改了宽度，margin,padding等结果都不行，我想了一种解决方法：写两种样式，一种在ie里面用，一种在firefox里面用