user2045025
Reputation:
float not working on div
I gave float Left to this div but its not moving left to its above div.....
the welcome and mail id should be adjacent to company logo div....
each div should be horizontally aligned
<div style="float: left;">
<p>welcome xyz! [email protected]</p>
</div>
providing my code below
<div style="
display: inline-block;
">
<a class="brand" href="<?= HOME_URL ;?>" style="">
Company LOGO
</a>
</div>
<div style="clear: left;">
<p>47657 Lakeview Blvd</p>
<p>Fremont CA 94538</p>
<p>510-657-8981</p>
</div>
<div style="float: left;">
<p>welcome xyz! [email protected]</p>
</div>
<div class="inline" style="padding-top: 12px;">
<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; color: #333;">
<a style="color: #333;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_menu.png">
Menu
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #; ">
<a style="color: #653921;" 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: #653921;" 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">
BOM List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #653921;" 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">
Sub BOM List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
<a style="color: #9e1c20;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_product.png">
Product
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
<a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_customer.png">
Customer List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #184179;">
<a style="color: #ff5100;" 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">
Vendor List
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
Upvotes: 0
Views: 208
Answers (3)
Pawan Lakhara
Reputation: 1150
try this
<div class="companyLogo" style="width: 1009px;">
<div style="width: 400px;height: 120px;">
<div style="float:right;margin-top: -8px;">
<a class="brand" href="<?= HOME_URL ;?>" style="">
Company LOGO
</a>
<div style="clear: left;">
<p>47657 Lakeview Blvd</p>
<p>Fremont CA 94538</p>
<p>510-657-8981</p>
</div></div>
<div style="float: left;">
<p>welcome xyz! [email protected]</p>
</div>
</div>
<div class="inline" style="padding-top: 12px;">
<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; color: #333;">
<a style="color: #333;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_menu.png">
Menu
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #; ">
<a style="color: #653921;" 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: #653921;" 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">
BOM List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #653921; ">
<a style="color: #653921;" 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">
Sub BOM List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
<a style="color: #9e1c20;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_product.png">
Product
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
<a style="color: #ff5100;" href="http://www.w3schools.com/" target="_blank">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_customer.png">
Customer List
</a>
</li>
<li style="padding-bottom: 5px; list-style: none; color: #184179;">
<a style="color: #ff5100;" 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">
Vendor List
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
<div>
<p>ABC Systems</p>
<p>1234 lakeview Blvd</p>
<p>CA 94538</p>
<p>510-657-8981</p>
</div>
</div>
Upvotes: 0
arjuncc
Reputation: 3287
In this case you have to arrange div by div. Provide a float left for each div. And also set a heigh and with for each div. After that include this div inside another master div. I will include the jsfiddle soon
Upvotes: 1
EnterJQ
Reputation: 1014
Increase the width of your nav bar , then it will come left to top div
Upvotes: 0