html - 浏览器调整大小时移动图像

Question

很抱歉这个真正的菜鸟问题，但由于某种原因，我无法弄清楚为什么它不起作用。基本上，我正在尝试将徽标移动到标题菜单旁边。即使浏览器重新调整大小，徽标也会保留在标题菜单旁边。

代码：

html

<div class="header">
    <div class="logo">
    <div class="logo-name">
        <a href="/"><img src ="/images/logo.png" alt="Company Logo" /></a>
    </div>        
    </div>
    <div class="bar nav">
    <div class="nav-outer">
    <div class="nav-wrapper">
    <div class="nav-inner"> 
    Home, Products... </div></div>etc...

CSS

.header:after {
    background-color: #1D2124;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 92px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
div.logo {
    display: block;
    left: 0;
    margin-left: 110px;
    position: absolute;
    top: 5px;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.nav {
    min-height: 33px;
    top: 53px;
    width: auto;
    z-index: 100;
}
.nav-wrapper {
    left: 65px;
    margin: 0 auto;
    position: relative;
    width: 890px;
}

图片：http: //imageshack.us/f/40/c4dr.png/

谢谢大家的帮助。

Answer 1

你在寻找类似的东西吗？

HTML

<div class="main">
    <div class="nav">
        <div class="sub logo"></div>
        <div class="sub">link</div>
        <div class="sub">link</div>
        <div class="sub">link</div>

    </div>
</div>

CSS

.sub{
    width:auto;
    height:20px;
    background:green;
    float:left;
    min-width:40px;
}
.logo{
    background:blue;
}
.main{
    background:red;
    height:40px;
}

jsfiddle