html images - two adjacent images

Question

I have two images that I want adjacent but they appear one above the other. here is the code:

<div style="float:left;">
<div style="float:left;">
<img src="/logo.png" style="float:left;" /></div> 
<div style="float:left;"> <img src="/logo2.png" width="55" style="float:left;" height="50"/</div>
</div>

Note that both divs containing the two images are themselves within a div that is floated to the left.

Thanks.

Answer 1

Dont see any problems on Firefox also you can change your html to

<div>
<div style="float:left;">
<img src="/logo.png"/></div> 
<div style="float:left;"> <img src="/logo2.png" width="55" height="50"/</div>
</div>

Answer 2

To prevent wrapping, specify a width for the containing div. In this case, its width will be equal to the sum of the widths of the two images.

<div style="width: 255;">
  <div style="float:left;">
    <img src="/logo.png" width="200" style="float:left;" />
  </div> 
  <div style="float:left;"> 
    <img src="/logo2.png" width="55" style="float:left;" height="50"/>
  </div>
</div>

The above will not work if the width of the content is not known at design time. In this case, you can use the table-row and table-cell CSS properties. This is shown in the code below.

<div style="display: table-row;">
  <div style="display: table-cell;">
    <img src="/logo.png" style="float:left;" />
  </div> 
  <div style="display: table-cell;"> 
    <img src="/logo2.png" width="55" style="float:left;" height="50" />
  </div>
</div>