2013-02-13 2 views
0

В заголовке я дал четыре разных значения и использовал свойство float tomake, все отображаемое в горизонтальной линии.В размере браузера re div сводится

Когда я изменяю размер окна браузера, последний div спускается ниже черной граничной линии.

Как это исправить.

http://jsfiddle.net/m6uBA/

<div class="mainDiv" style="border-bottom: 1px solid grey; height: 80px;"> 
      <div class="subDiv" style="font-size: 24px; color: grey; padding-left: 35px;"> 
       Company LOGO 
      </div> 
      <div class="subDiv" style="padding-left: 50px;"> 
       <p><span style="font-weight: bold; font-family: arial; color: #333;">welcome xyz!</span> [email protected]</p> 
      </div> 
      <div class="subDivMenu" style="width: 911px; margin-top: 0px; padding-left: 17px; "> 


       <div class="inline" style="padding-top: 12px; "> 

        <ul class="homePageLists" style=""> 
            <li style="padding-bottom: 5px; list-style: none; color: #333;"> 
             <a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
             Menu 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #; "> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
             <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png"> 
             Inventory 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #653921; "> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
             <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
             Vendors 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #653921; "> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
              Quote 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; "> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
              Purchase Orders 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #ff5100; "> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
             <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
             Invoices 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #184179;"> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
              RMA 
             </a> 
            </li> 
            <li style="padding-bottom: 5px; list-style: none; color: #184179;"> 
             <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank"> 
              <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png"> 
              Account Receivable 
             </a> 
            </li> 
           </ul> 

       </div><!--/.nav-collapse --> 

      </div> 
      <div class="subDiv" style="float: right;"> 

        <p style="font-weight: bold;">ABC Systems</p> 
        <p>1234 lakeview Blvd, CA 94538</p> 
        <p>510-657-8981</p> 

      </div> 
     </div> 
+1

Это был дан ответ раньше. проверить этот старый поток: henser

+0

@henser: вы можете обновить в скрипке его запутанный – user2045025

ответ

0

Попробуйте добавить новый класс .subDiv .welcome и например плавучий правильно, а затем с помощью поплавка слева на обоих элементов в заголовке.

+0

вы можете обновить в скрипке его путают http://jsfiddle.net/m6uBA/ – user2045025

Смежные вопросы