按百分比宽度排序我的Floated div

Question

我有这个简单的CSS布局是我问题的核心：

左侧设置为float:left，宽度设置为70%，右侧设置为float:right，宽度设置为30%。 然而，这给我留下了一个空隙，他们并没有像我需要的那样触摸它们：

要解决这个问题，我可以将百分比更改为70.1% and 30%.，这意味着大部分时间差距已经消失，但偶尔会将右侧推到低于左侧，这是不好的！

我尝试将右侧的宽度设置为auto，然后再将右侧向下推，但看起来像这样：

然后我试图摆脱右侧的float:right。哪个ALMOST工作，除了register_container一直下降到底部，即使其余的div（也在右侧内部但在register_container之后列出）位于右边，因为它们应该：

以下是a paste of my css，这是我暂时上传的网站：http://greenevent.site50.net/index.php

如果有人能帮助我解决我的问题，那就太好了！ （如果不清楚，我希望这个安排看起来像张贴的第一个网站图片，但没有差距。）

Answer 1

将您的float: right;切换到右侧容器上的float: left;。您还需要为容器指定宽度。

webkit浏览器中存在一个错误，这意味着您有时无法获得100％的麻烦。

http://jsfiddle.net/spacebeers/Lyphr/2/

如果您在Chrome的开发工具中将右侧容器的宽度更改为27％，那么您将获得所需的布局。

Answer 2

您也可以尝试仅浮动左侧并在右侧有一个边距：

​#left
{
   float: left;
   width: 70%;
   background: yellow;
}

#right 
{
   margin-left: 70%;
   background: red;
}

http://jsfiddle.net/2z6KZ/