是否有可能使浮动Div响应？

Question

我试图使我的头部浮动div包括一个ul列表菜单响应网页浏​​览器的大小。我用jQuery插件在达到960像素时使用菜单实现了它。但我希望divs能够对调整浏览器的大小做出反应，直到达到这一点。

这是标记

<div id="header"> 
    <div id="outterTopWrap"> 
    <div id="topNavWrap"> 
     <div id="email">Email Us at:&nbsp; <a href="mailto:elenacipriano2@gmail.com"> elenacipriano2@gmail.com</a></div> 
      <div id="innernavWrap"> 
      <div class="topnav"><a href="#"><img src="images/facebook.jpg" width="48" height="43" alt="facebook" /></a></div> 
      <div class="topnav"><a href="#"><img src="images/twitter.jpg" width="48" height="43" alt="twitter" /></a></div> 
      <div class="topnav"><a href="#"><img src="images/linkedin.jpg" width="48" height="43" alt="linkedin" /></a></div> 
      <div class="topnav"><a href="#"><img src="images/google.jpg" width="48" height="43" alt="google+" /></a></div> 
      <div class="topnav"><a href="#"><img src="images/rss.jpg" width="48" height="43" alt="rss" /></a></div> 
      </div> 
    </div><!-- End topNavWrap --> 
    <div id="bottomNav_wrap"> 
     <div id="logo"><img src="images/sandpiperLogo.png" width="320" height="69" alt="Sandpiper Logo" /></div> 
     <div id="navWrap"> 
       <ul id="Navlist"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Register</a></li> 
         <li><a href="#">Floor Plans</a></li> 
         <li><a href="#">Site Plans</a></li> 
         <li><a href="#">Features</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
     </div><!-- End navWrap --> 
     <div id="rightMenu_wrap"> 
      <div id="tagline">Travel and Tour Wasaga Beach Now!</div> 
      <div id="phone">1-800-222-2222</div> 
     </div><!-- End leftMenu_wrap --> 
    </div><!-- End bottomNav_wrap --> 

    </div><!-- End outterTopWrap --> 
</div><!--header --> 

和CSS

#header{ 
    position: relative; 
    background-color: #252b2b; 
    height: 164px; 
    width: 100%; 
    top:0; 
    left:0; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-left-color: #343a3b; 
} 

#outterTopWrap{ 
    position: relative; 
    width: 1170px; 
    margin:auto; 
    height:164px 
    } 

#topNavWrap{ 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #343a3b; 
    position: relative; 
    width: 1170px; 
    margin:auto; 
    height:43px; 
} 

#bottomNav_wrap{ 
    width: 1170px; 
    height: 120px; 
    position:relative; 





    } 
#innernavWrap{ 
    height: 43px; 
    width: 245px; 
    position: absolute; 
    right: 0px; 
    background-color: #999; 
    } 

.topnav{ 
    background-color: #FFF; 
    display: inline; 
    float: left; 
    height: 43px; 
    width: 48px; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #343a3b; 
} 

#email{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    line-height: 43px; 
    color: #929A94; 
    height: 43px; 
    width: 400px; 
    position: absolute; 
    left: 0px; 
    background-image: url(../images/emailBG.jpg); 
    background-position: left; 
    background-repeat: no-repeat; 
    padding-left: 35px; 
} 

#logo{ 
    height: 100px; 
    width: 320px; 
    position: relative; 
    left: 0px; 
    padding-top:20px; 
    float:left; 
} 

#rightMenu_wrap{ 
    position:relative; 
    width:265px; 
    height:94px; 
    float:left; 
    margin-top:26px; 
    } 
#phone{ 
    background-image: url(../images/phoneIcon.jpg); 
    height: 47px; 
    width: 198px; 
    position: absolute; 
    bottom: 0px; 
    right:0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 25px; 
    color: #FFF; 
    padding-left:58px; 
    line-height:47px; 
    background-color: #41c6ef; 
    background-repeat: no-repeat; 
    background-position: left; 
    } 
#tagline{ 
    height: 47px; 
    width: 265px; 
    position: absolute; 
    right: 0px; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 15px; 
    color: #ec894d; 
    line-height:47px; 
    font-weight: lighter; 
    text-transform: uppercase; 
    text-align:right; 
    } 

/****************Menu Navigation*********************************/ 

    #navWrap{ 
     height: 33px; 
     position: relative; 
     float:left; 
     display:inline; 
     width:560px; 
     margin-top:87px; 
     margin-left:25px; 
    } 

    ul#Navlist{ 
     margin: 0; 
     padding:0; 
    } 

    ul#Navlist li{ 
     display: inline; 
     list-style-type: none; 
     padding-right:7px; 
     padding-left:7px; 
     padding-top:15px; 
     padding-bottom:15px; 
     color: #929a9b; 
     } 

    ul#Navlist li a 
     { 
     font-family: Arial, Helvetica, sans-serif; 
     color: #929a9b; 
     text-decoration: none; 
     font-weight: lighter; 
     font-size: 17px; 
    } 

    ul#Navlist li a:hover{ 
     color: #FFF; 
    } 

    ul#Navlist li:hover{ 
     background-image: url(../images/listBG.jpg); 
     background-repeat: repeat-x; 
    } 

Answer 1

这是一种很难检验一切完全不具有图像的工作，和你的代码是一个小关（无论如何，这里是我该怎么做：

#header { 
    max-width: 1170px; 
} 
#leftNavWrap { 
    width: 50%; 
    float:left; 
} 

#rightNavWrap { 
    width: 50%; 
    float: right; 
} 

你c然后通过媒体查询以较低的像素宽度对目标进行定位。