Grow your CSS skills. Land your dream job.

Help with HTML email

  • # August 16, 2012 at 11:50 am

    Hello everyone!

    I am having a problem with this layout:

    http://www.dropbox.com/s/gjofw4r0dhaytey/layout.jpg

    As you can see, it has several containers within other containers and I cant seem to get the layout to work . I’ve only just started using tables so not a pro. I seem to get the tags confused and mixed up with the and tags and I’m getting some pretty weird bugs.

    Help would be very much appreciated!

    # August 16, 2012 at 11:55 am

    It might be better if you created something in CodePen for us to look at.

    Remember, HTML emails are basically tables. It’s a art most of us don’t bother with any more.

    Not sure you can get rounded corners to work though without images.

    At the moment, it looks like a ‘background’ table containing a nest of tables.

    # August 16, 2012 at 11:58 am

    Oh, shoot!

    Sorry about that… try that one

    http://img6.imageshack.us/img6/5800/layoutlw.jpg

    :-)

    # August 16, 2012 at 12:06 pm

    OK., edited previous post, I got the link to work.

    Previous comments apply. Will this be a one-column layout all the way through or will there be multiple columns of content inside any of the tables?

    # August 16, 2012 at 12:12 pm

    I’ll just post a picture of what it should look like when its done so that you can get a better idea.

    http://www.dropbox.com/s/iidsp8pcojyvt8e/finishedEmail.jpg

    # August 16, 2012 at 12:25 pm

    Wow….some of that isn’t going to work, I suspect…especially that image that’s bursting out of the row.

    Not saying it can’t be done…but it will take some work.

    # August 16, 2012 at 12:29 pm

    Yes I am aware of the fact that images in emails tend to have poor support. But thats not the issue im having at the moment. I just want to be able to nest the tables within one large container and specify a diffrent background color for the relevant sections; as shown in the first link.

    Ill pop over some code on codepen….hopefully that’l get the ball rolling!

    # August 16, 2012 at 1:27 pm

    Here’s one to get you started: http://codepen.io/Paulie-D/pen/qJHnj

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".