Member Avatar for 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).

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

  • 5 Contributors
  • 4 Replies
  • 295 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by NetJunkie

Dani AI

Generated

Short answer: the red gap is almost always caused by table-cell spacing/padding or the images being treated as inline elements (or the images themselves containing built-in whitespace). 's negative-margin trick will hide the gap, and or suggested floats/divs which can work, but the clean, robust fixes are (A) zero the table cell spacing/padding and make images block-level, or (B) move to a simple flexbox layout.

Table-based fix (keep your table but remove the spacing):

/* keep the table if you must, but remove default spacing */
table.header {
  width: 570px;
  border-collapse: collapse;
  border-spacing: 0;
  background: #f00;
  table-layout: fixed;
}
table.header td { padding: 0; margin: 0; vertical-align: top; }
table.header img { display: block; height: 105px; max-width: none; }
table.header td:first-child { width: 249px; }
table.header td:last-child  { width: 321px; }

This ensures the cells have no extra padding/spacing and the images fill their cells exactly (no inline whitespace). If the two image widths sum to the table width, this will remove the gap.

Modern alternative (recommended): replace the table with a semantic wrapper and use flexbox — simpler and responsive:

<div class="header">
  <img src="logo.jpg" alt="logo">
  <img src="heading.jpg" alt="heading">
</div>
.header { display: flex; justify-content: space-between; align-items: center; width: 570px; background:#f00; }
.header img { display: block; height: 105px; }

Quick troubleshooting: inspect the computed styles in devtools to find any td padding, border, or margins; check the image files for baked-in whitespace; and watch for 1px rounding issues on scaled images (use exact pixel widths or let flexbox handle sizing). Mentioning — switching to divs/flexbox is the cleaner long-term solution.

Recommended Answers

All 4 Replies

Member Avatar for 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">

Member Avatar for 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.

Edited by gabrielcastillo because: Additional information added
Member Avatar for 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.

Member Avatar for 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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.