ヘッダーには 4 つの違いを指定し、float プロパティを使用してすべてを水平線で表示します。
ブラウザー ウィンドウのサイズを変更すると、最後の div が黒い境界線の下に表示されます。
それを修正する方法。
<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> xyz@defie.co</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>