Need help aligning text to the bottom of a div

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Photo of Social Media Mentions

Social Media Mentions

  • 39 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 0
  • 1
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi there -- It looks like you're trying to control vertical alignment in a text block using the toolbar. Have you tried doing this instead using an HTML block? We don't offer support for customer-coded HTML, yet you may have better luck doing some code customization like this in an HTML block. Keep me posted!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
Ok, thanks. I'll give that a try. Is there a reason for the inconsistency between the editor and preview? Also, is there a list of HTML elements that are and aren't allowed? For example, even in an HTML block the button tag is deleted from the code when it's saved. Also, is there more information about how elements stack on mobile?
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
We've outlined our best practices for HTML in an email enviroment in our Resource Center! You can find those tips herehere and over here. In general, you can expect your content to stack from top to bottom and left to right when using one of our mobile optimized gallery templates. More specifically, the templates will stack in this order: header, top row, left to right columns, bottom row, footer. There's a bit more information on how we code our template for mobile optimization over here!

I'll dig into the editor/preview discrepancy and see what I can find!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
Any update on this? I'm seeing something similar to this again. I create a class in <style> tags and then use that class to format a paragraph. It looks fine in the editor, but is ignored on preview and is deleted after I close and reopen the campaign. I know it was saved because the class is still applied to the <p> tag, but the <style> block has been removed.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi there -- Thanks for checking in! Here's what I found... because you're using the "blank without a header" template on the mailing, there are some stylings hardcoded into the template by default that will render when there's not something coded inline to overwrite them. In this case, there's a little margin built in to the bottom of paragraphs -- it looks like the HTML block is actually respecting that bottom vertical alignment, but the template is adding a little default space to the bottom of the paragraph. 

To avoid that default space being added to the bottom of a paragraph, I'd suggest not using that section of text within paragragh tags. You can move the style you have coded in the paragraph tag to within the td tag and then remove the p tags around the text altogether. That td with the paragraph tags removed and the style bumped up to the correct portion would look like this: 


I've got a litmus test that shows how that revised tag renders -- it shows your entire mailing so I thought I'd check in with you before sharing that here. Let me know!
(Edited)
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
Thank you for looking into this and getting back to me. I made the change in my version and see how that works. If we switch layout, that is probably the version I'd go with. That mailing was actually my work around version to the problem that I originally asked about; honestly, using a table was my last resort. I was confused about how code was rendered differently in the editor than in the preview,  <div style="position: absolute; bottom: 0; right: 10px">, and the fact the adding "vertical-align: text-bottom;" as an inline style did nothing. I've accepted that this is just a limitation that I will have to work with, but I'd still like to see more consistency between the editor and preview. I'd also like to know if using <style></style> to create my own classes is not allowed since that code get deleted when I close and reopen the mailing.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hey there -- You can use <style> tags in an HTML block in the editor, so if you were unable to save those it might have been due to something else in your code. If you're still interested in exploring this, can you save the HTML you were using there to a text file and add it to your document library? I'll download it and take a look!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
I just uploaded a file called "Justify Last Line.docx". It's purpose is to force a single line of text to justify. I also use it on our website.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
I was able to get the code from your file to stick in an HTML block in my own account, so its possible something else in your <style></style> tags are causing issues. Could upload the full contents of the HTML block that is giving you trouble? I'll give that another look!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
I don't have the exact code anymore. I couldn't get it to work, so I deleted that code it and did something else so we could send the mailing. I put that class into a mailing I'm working on today, Summer Pay-Cation and I'm seeing the same issues. I put it in a HTML block and a text block. You can see the first screenshot that it's justifying the one blue/green line in the editor (there's different padding between the two blocks that's making them looking a little different). Then in the second screenshot, the line is no longer justified when viewed in preview. I did "Save & Close" for the mailing and when I reopened it, the class was still there in the HTML block, but had been deleted from the text block.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hey there -- While some basic HTML will work in text blocks, your best bet will always be to use HTML blocks when adding your own CSS classes. It sounds like the class is sticking in your HTML block -- will that approach work for you moving forward?
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
It works to keep from losing the code, but even in the HTML block, the code doesn't actually seem to be working. In the screenshots I uploaded in my last comment, you can see that the line of text is justified when viewed in the editor, but isn't when viewed in preview. If I remember correctly, when I send a test email of the original campaign I was working on, the test email was formatted like the preview. How do I get this code to work anywhere besides the editor?
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Thanks a ton for hanging in here with me on this! I circled up with a member of our design team to confirm that I was communicating the correct information about using CSS in an HTML block, and it turns out I was not! 

It turns out you cannot use CSS in an HTML block and will need to use inline styling instead. The template itself contains its own set of <style> tags, so any new <style> tags you add in the editor will be ignored when it actually renders. Sorry for the confusion here!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
Ok, thanks for figuring that out for me. It would be great if there was more in depth information available for what HTML/CSS were allowed in the mailing.
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
It seems rather arbitrary when styles are and aren't allowed. For example, on an email I'm woking on this morning, I added an inline style to <li> setting the left margin to 0px, but that isn't reflected in the preview and is removed when I save and close. I tried adding the style to the <ul> instead and while it doesn't get deleted, it's still ignored. So, I guess it's not allowed?
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
Sorry, to keep adding to this, but I've just noticed that you also can't apply styles to <hr>. I wanted to change the width, but the style is getting ignored/deleted. A big list of where you can and can't apply styles to would be great. Also a list of tag that are and aren't allowed.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
I want to make sure I'm following along here. By appliying styles to the <hr> tag, are you trying to set your own custom header style? If so, is editor's option not meeting your needs here? 



At this point, are you working in Template Builder or in the editor? Thanks!
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
No, I'm trying to change the width of a horizontal rule (ex. <hr style="width: 50%">). I'm still in Editor. Same issue as before: works in Editor, not in preview and is removed with the mailing is saved. I've done it in a text block and an html block. Strangely, in the html block it tries to close the horizontal rule (</hr>) at the end of the code after I save and reopen. Also, are negative margins not allowed? There is so much space around a horizontal rule and not many ways to adjust it.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Ah yes -- thanks for that clarification. Let me dig in here to see if I can better outline the HTML rules for you!