元素始终清除左侧浮动的短项目

Question

请看这个小提琴：http://jsfiddle.net/FnED8/3/

右侧的项目网格项一旦通过第一行，就会在左侧的#nav元素下方清除，我希望右侧的项始终保持对齐且永不清晰。显然，我可以将#nav的高度设置为像1000px那样大，并获得所需的结果，但这不是答案。

基本上我希望#nav为100％身高而#projects尊重这一点，并且永远不要在下面明确，始终保持在它旁边。

修改 - #projects宽度为90％，使网格半流畅，这不应该影响此问题。

Answer 1

按照以下方式制作项目网格： -

#projects-grid {
    float: left;
    width: 300px;

}

http://jsfiddle.net/FnED8/4/

或者你喜欢的任何宽度。 马特

Answer 2

一种可能的解决方案是在display: inline-block元素上设置#projects-grid。但请记住，您需要调整宽度，因为90％太宽而无法放在#nav旁边。

Updated Fiddle

Answer 3

这是你想要达到的目标吗？ http://jsfiddle.net/thebabydino/FnED8/7/

为#projects网格设置合适的左边距并将其宽度移除90％就可以了。

#projects-grid {
    margin-left: 174px;
}