当窗口调整大小时，Div移动到另一个div下面

Question

当我调整浏览器窗口的大小时，我的导航栏div会低于搜索框div。 如何阻止导航栏移动并将其保持在同一位置？页脚表现自己，结构是否相同？

这是一个链接...

http://www.signport.co.uk/test/asg_template3.html

谢谢！

Answer 1

这是因为您的菜单没有指定宽度。而页脚的行为是因为它具有指定的宽度（div为footerleft）

Answer 2

我现在在Chrome上测试，删除宽度：你在导航栏上设置的100％div（wrapper_menu_full类）似乎可以解决问题。这100％是指与包含div（#mainmenu3）相比的大小。

如果这仍然无法在IE7上运行，请尝试在#mainmenu3内设置两个div来显示：inline，虽然现在我在Chrome上测试它似乎没有任何区别。

Answer 3

更换你的CSS

#mainmenu3 {
    height: 150px;
    line-height: 20px;
    list-style-type: none;
    overflow: hidden;
    width: 100%;
}

您将获得所需的输出

Answer 4

你在两个div上使用浮动元素（searchfilter和menu）。 当您使用浮动元素，并且浮动元素的最后一个的宽度超过父级的宽度时，它将移动到下一行（belov）。

将它放入你的css中，使其按你的意愿工作：

#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}