Trying to align one image left, and one right, inside table using CSS?

[MrDavo]

Hi Everyone,

It has been a while since I have delved into web design, and as a result many of the old tags that I have used are no longer supported within HTML5. Due to the changes I am being forced to rely upon CSS to perform tasks where I would traditionally have simply used HTML.

The the moment I have a 'simple' issue where in I would like to completely eliminate the space between a logo (on the left), and a heading (on the right).

Click Here

In the 'good old days' I would simply have used <td align="left">, for the logo, and <td align="right">, for the heading - however now (as of HTML5) I must use CSS.

I have tried a variety of CSS attributes, without success, and my code currently looks like the following -

<div class="float-left">
    <table style="background-color: #f00; border-collapse: collapse; table-layout: fixed; width: 570px;">
        <tr>
            <td>  
                <img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg" height="105" width="249">
            </td>
            <td>
                <img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg" height="105" width="321">
            </td>
        </tr>
    </table>
</div>

How can I go about eliminating the 'red gap' (background colour here is a deliberate choice!) between the logo (left) and heading (right)?

Any help will be greatly appreciated.

Kind Regards,

Davo

[JorgeM]

There are so many different ways to address this. I'm not sure that i would have used a table for this purpose, but that's fine. You could for instance apply a negative margin to the right image and that will move it over. Not really the best approach, but it will do the trick.

<img src="~/Images/sce-bpp-online.jpg" height="105" width="321" style="margin-left:-37px">

[gabrielcastillo]

You could change the width of you table, or image. This is because you are using tables cells to display images and not just data. I would use div's and css instead.

User Firebug to test changes then apply to your code.

[karand19]

You'r using table, So you don't need left and right align.
For div structure you have many way to do that using float, width, text align.

[NetJunkie]

Try this code and see if this has the result you are looking for:

    <div class="float-left">
        <table style="background-color: #f00; border-collapse: collapse; table-layout: fixed; width: 570px;">
            <tr>
                <td>
                    <img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg" height="105" width="249" style="float:left; display:inline;">
                </td>
                <td>
                    <img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg" height="105" width="321" style="float:right; display: inline;">
                </td>
            </tr>
        </table>
    </div>

I am doing this on my phone so I am sorry if I missed anything!