Newsletter white space conundrum

HTML & CSS
1

Hi from,

22 degrees C York UK!

So long since ive had to edit table code and frankly its baking my noodle trying to adjust padding. The design issue i have is simple i need to get 3 even white spaces to the left of images, running down the middle and the white space running down the right.

Below illustrates my problem and code below that :slight_smile:

799Ă—592 212 KB

Thanks in advance,
David

2

Instead of thinking padding, think {border-spacing:20px 0}, or whatever wpace you need.

table {
    border-spacing:20px 0;  /* horiz vert */
}
td {
    padding:0;
}

will create three equal “columns” of white space between and beside two cells.

PS: the CodePen is formatted incorrectly. HTML and CSS should be in separate sections.

3

@ronpat For this to work does it mean i have to knock out all padding references and add your suggestion? (Thank you for taking a look at this)

David

4

I could throw another spanner in the works and question whether a table nested tables are semantically appropriate in this case. :grimacing:

You did not make thing easy on yourself using in-line styles on the TDs. :disappointed:

5

Without seeing your code, the best answer is “probably yes”. At the very least, it would be the right place to start.

It sounded like you are asking for equal width space between and beside the cells and border-spacing without padding will give you exactly that.

6

Thank ypu. I’ll give it a go :slight_smile:

7

Using mailchimp, exported HTML :frowning:

8

Oh, sorry, this is an Email newsletter?
In that case you are forgiven for in-line styles and tables. :smile:

2 Likes
9

Sorted! (top 2 cells at least!)

Thanks for advice :slight_smile:

10

I’m puzzled. Those two cells in a rwo do not have any white space along the outer edges which is not what you described.

11

I’m working on a different pattern of code for you . It’s about 90% finished. Will it work properly as an e-mail newsletter? I don’t know for sure, but believe that it should when finished. I’m not trying to make it ultimately versatile, just a lot simpler than yours yet suitable for e-mail. Nothing lost if it doesn’t work :wink: You’ll have to add the Microsoft or MailChimp specific properties back in as needed.

12

This topic seems to have faded. I will post what I started even though it seems to be mostly off-track from your intent. My response earlier was to use border-spacing to impose space between two columns of images. That is the basis for most of these tables. BTW - These are stacks of independednt tables. You can of course surround them with rows if you wish, but rows aren’t necessary here.

The very top table does not define the width of either cell.

The second table contains a single cell. The York image has a fixed width until the width of the page is reduced to that width then it scales smaller.,

The third table contains a single cell. The racers image has a percent width so it will always be narrower than the width of the table.

The fourth table also contains a single cell and is framed the same as tables two and three.

The fifth table contains your inner table code. Takes up lots of room.

The sixth table does the same thing as the fifth table, but does not contain nesed tables.

The seventh and eighth tables also contain no nested tables.

Table nine contains a single cell and is the same HTML structure as tables 2,3,and 4.

Table ten is different, it uses padding in the outside edges of the two cells instead of border-spacing so the images can be adjacent to one another in the middle.

There you have it. FWIW

I had intended to reinsert the code inline, but backed off since I don’t think this has much to do with your original question. Hope it’s useful, nonetheless.

Cheers

space-betw-imgs1.html (15.5 KB)

(wildly invalid.)

1 Like
13

Thank you, apologies for late response :slight_smile:

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.