Align Multiple In A Line

Hello all, I am trying to align all the images in a row. But right now, the image with the drop down buttons function drops down to another row.

Here is the link

How do I align it to be link this?

I have tried using the float left but it still does not work.

Here are my codes:

Page

<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Header.jpg" alt="" title="" width="825" height="85" class="alignnone size-full wp-image-615" />
<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Left.jpg" alt="" title="" width="167" height="30" class="alignnone size-full wp-image-609" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /><img  src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /><ul class="dropv"><li><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Products.gif" alt="" title="" width="60" height="30" class="alignnone size-full wp-image-13" /><ul><li><a href="http://insurancecommissionrefund.com/testwebsite/general-purpose-boat/">General Purpose Boat</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/accommodation-work-boats/">Accommodation Work Boats</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/work-barge/">Work Barge</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/seismic-support-vessels/">Seismic Support Vessels</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/supply-vessels/">Supply Vessels</a></li>
      <li><a href="http://insurancecommissionrefund.com/testwebsite/others/">Others</a></li>
      </ul>
    </li>
   </ul><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Recruitment.gif" alt="" title="" width="78" height="30" class="alignnone size-full wp-image-16" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Contact.gif" alt="" title="" width="57" height="30" class="alignnone size-full wp-image-17" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Sitemap.gif" alt="" title="" width="60" height="30" class="alignnone size-full wp-image-18" /><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Right.jpg" alt="" title="" width="274" height="30" class="alignnone size-full wp-image-29" />

CSS

.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;position:relative;z-index:99}
.dropv a {display: inline; width: 180px;list-style-type: none;}
.dropv li {float: left; padding: 0px 0px 0px 0px 0px 0px;list-style-type: none; margin-bottom:0 }  /* all list items */
.dropv li li{margin-bottom:1em}
.entry img {vertical-align:top}
.dropv li ul {position: absolute; background: #46558a;opacity:0.8;
filter:alpha(opacity=80); padding: 0px 0px 0px 0px; width: 180px; left: -9999px;list-style-type: none;} /* second-level lists */
.dropv li:hover ul {left: auto;list-style-type: none;} /* nest list under hovered list items */
.dropv li ul li a {color: #ffffff;font-size: 14px; font-weight:bold; text-decoration: none; display: block;list-style-type: none;}
.dropv li ul li a:hover {background:#272364;opacity:0.9;
filter:alpha(opacity=90);list-style-type: none;}

Thank you for any help rendered in advance.

Can you give us the page? It makes it easier to debug. Especially because most of your code is just images (which we don’t have access to.)

Hi Ryan,

Here is the page link, thank you so much!

You have a really awkward setup for the HTML. Not really possible as it stands.

Could you move the images on the first part of the navigation, into the same <ul> where the rest is? That would be the easiest/best solution :). I don’t know why you have those two parts separated right now.

Hi Ryan,

Sorry, I do not get what you are trying to say here :frowning:

You have this (just two examples)

[FONT=monospace]<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" />[/FONT][FONT=monospace]<img  src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" />

That depicts the top part of the navigation (before the drop). Just go into the <ul><li> stuff and turn the above code, into more of that.

So the above code would basically be…

<li><a href="about.php"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg" alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /></a></li>
<li><a href="news.php"><img  src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif" alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /></a></li>

Place in the dropdown accordingly (it’d be at the start of the list. Since it appears first).

I feel like I explained that bad, but the code examples should have you understand what I mean :).[/FONT]

Great info Ryan!

@Stormy, try the code I got below and see if this is what you are looking for:

<html>
<head>
   <title>Align Multiple In A Line</title>
   <style>
      .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;position:relative;z-index:99}
      .dropv a {display: inline; width: 180px;list-style-type: none;}
      .dropv li {float: left; padding: 0px 0px 0px 0px 0px 0px;list-style-type: none; margin-bottom:0 }  /* all list items */
      .dropv li li{margin-bottom:1em}
      .entry img {vertical-align:top}
      .dropv li ul {position: absolute; background: #46558a;opacity:0.8;filter:alpha(opacity=80); padding: 0px 0px 0px 0px; width: 180px; left: -9999px;list-style-type: none;} /* second-level lists */
      .dropv li:hover ul {left: auto;list-style-type: none;} /* nest list under hovered list items */
      .dropv li ul li a {color: #ffffff;font-size: 14px; fontont-weight:bold; text-decoration: none; display: block;list-style-type: none;}
      .dropv li ul li a:hover {background:#272364;opacity:0.9;filter:alpha(opacity=90);list-style-type: none;}
   </style>
</head>
<body>

<img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Header.jpg"
     alt="" title="" width="825" height="85"
   class="alignnone size-full wp-image-615" />

<ul class="dropv">
   <li>
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Left.jpg"
	   alt="" title="" width="167" height="30" class="alignnone size-full wp-image-609" />
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_AboutDenso.jpg"
	   alt="" title="" width="82" height="30" class="alignnone size-full wp-image-24" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_News.gif"
	    alt="" title="" width="47" height="30" class="alignnone size-full wp-image-12" /></a>
   </li>
   <li><a href="#">
	   <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Products.gif"
		alt="" title="" width="60" height="30" class="alignnone size-full wp-image-13" /></a>
	<ul>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/general-purpose-boat/">General Purpose Boat</a></li>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/accommodation-work-boats/">Accommodation Work Boats</a></li>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/work-barge/">Work Barge</a></li>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/seismic-support-vessels/">Seismic Support Vessels</a></li>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/supply-vessels/">Supply Vessels</a></li>
	   <li><a href="http://insurancecommissionrefund.com/testwebsite/others/">Others</a></li>
	</ul>
   </li>
   <li><a href="#">
      <img
       src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Recruitment.gif"
       alt="" title="" width="78" height="30"
   class="alignnone size-full wp-image-16" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Contact.gif"
	   alt="" title="" width="57" height="30" class="alignnone size-full wp-image-17" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Sitemap.gif"
   alt="" title="" width="60" height="30" class="alignnone size-full wp-image-18" /></a>
   </li>
   <li><a href="#">
      <img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Nav_Right.jpg"
	   alt="" title="" width="274" height="30" class="alignnone size-full wp-image-29" /></a>
   </li>
</ul>

</body>
</html>