Adding an image to right pushes the table below to right

Question

I have some HTML code. I have added two images: one alinged to the left and one to the right. Then it has two headings and an HTML table after that.

The problem is that I have use the following code to add the images to the document.

<img src="http://Path_To_Foler/Logo1.jpg" align="left" />       
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />  

<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>

<table class="table" >
    <tr>
        <td class="CellHeader">Date </td>
        <td class="CellHeader">Time</td>
    </tr>
    <tr>
        <td class="cell"><AssessmentDateFrmMSPAPARR /></td>
        <td class="cell"><CurrentRcFrmMSPAPARR /></td>
    </tr>
</table>

CSS

  <style>
    .CellHeader{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        color:#FFFFFF;
        background-color:#151515;
        border:1px solid black;
        border-collapse:collapse;
    }
    .cell{
        width:50%;
        text-align:left;
        font-family: 'calibri';
        font-size: 11pt;
        border:1px solid black;
        border-collapse:collapse;
    }

    .table{
        width:100%;
        border:1px solid black;
        border-collapse:collapse;
    }
    .h1{
        page-break-before: always;
        text-align: center;
        font-family: 'calibri';
        font-size: 12pt;
    }
 <style>

Issue

Everything was working fine as expected. The problem started when I added the second image. Adding second image causes the table to be aligned right as well.

And when I take out the align:"right" atribute from the image element, the table is where it is supposed to be but the second image is pushed to the right which is kind of understandable.

How can I fix this?

Answer 1

Try replacing align="left" by style="float:left" and align="right" by style="float:right"

Then, add clear: both in .table{} in your CSS.