2012-07-30 85 views
0

我有我的问题的心脏这个简单的CSS布局:挑选出我飘来的div百分比宽度

enter image description here

的莱夫特赛德设置为float:left70%的宽度,右边设置为float:right,宽度为30%。 然而,这给我留下了一个缺口,他们不太喜欢摸我需要他们太:

enter image description here

为了解决这个我可以改变的百分比,以70.1% and 30%.这意味着大部分的时间差距不见了但偶尔会将版权推到低于左边的地方,这是不好的!

我试过rightside的宽度设置为auto并再次向下推rightside但看起来像这样:

enter image description here

然后我试图在rightside摆脱了float:right的。几乎工程除register_container一路下降至底部,即使div的其余部分(也rightside内,但register_container后上市)坐在右边,因为他们应该: enter image description here

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

如果有人能帮助我解决我的问题,那将是太棒了! (如果不明确,我希望安排看起来像发布的第一个网站图像,但没有细微的间隙)。

回答

2

将您的float: right;切换到您的正确容器上的float: left;。您还需要为容器分配宽度。

Webkit浏览器中存在一个错误,这意味着您在有时可能会有点痛苦的时候不会获得100%的回报。

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

如果您在Chrome的开发工具改变您的权利容器上的宽度,以27%你会得到你之后的布局。

+0

哦,谢谢!但我认为我的中央容器一定有问题,因为当我改变它时,你建议所有东西都掉到左边:http://i.imgur.com/vCksL.jpg – Holly 2012-07-30 16:26:50

+0

对不起,你必须给它指定一个宽度以及。这为我解决了。 – SpaceBeers 2012-07-30 16:28:58

+0

啊对不起,我刚刚刷新我现在得到它!谢谢! – Holly 2012-07-30 16:29:26

1

你也可以尝试浮动只在左侧,并有右侧保证金:

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

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

http://jsfiddle.net/2z6KZ/