I want to make text float to the very bottom right hand corner of an existing tag.
I'm still using old school tables (editing existing code). My code is this:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"></td>
<td width="50%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">KEEP UP TOP</td>
</tr>
</table>FLOAT BOTTOM
</td>
</tr>
</table>
The text that says FLOAT BOTTOM, doesnt obviously. How do make it so that always stays at the very bottom right corner?
The usual way to do this with tables is
Create a second row
Give that row (and the cells therein) a fixed height
Put the text into the right hand column in the second row
One CSS way to do this (without tables) would be
Give the container you want to place the text in the bottom right corner of position: relative
Wrap the text inside a <span>
Give the span position: absolute; bottom: 0px; right: 0px
Use style {style="vertical-align:baseline; text-align:right"}
Try this:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"></td>
<td width="50%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">KEEP UP TOP</td>
</tr>
</table><p style="position:absolute; bottom:0px; right:0px;">FLOAT BOTTOM</p>
</td>
</tr>
</table>
To make it float to the bottom right of the data cell that contains it you could probably do
<span style="float:right; vertical-align:text-bottom">FLOAT BOTTOM</span>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.
Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.
mockup of email design
However, on some email clients (ran through the Hubspot tester) there's a gap between the images:
gap between images
I've tried the following, with no luck:
cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table
Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:
<!-- TOP PORTION OF BANNER IMAGE -->
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END TOP PORTION OF BANNER IMAGE -->
<!-- REMAINDER OF BANNER IMAGE -->
<table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td valign="top" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END REMAINDER OF BANNER IMAGE -->
Are there specific ways I can get those images to align together across the board, outside of the methods I included above?
Fixed the issue by adding a style="display:block" to images.
Trying to replicate this sort of design/structure:
Notice Below the two boxes on one side of the table and the one big one on the other!
How would I achieve this using table css? Here's my current code, which is vertically stacked:
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Any idea?:
Steven is right, in theory:
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
table
{
margin-left: auto;
margin-right: auto;
}
But the article mentioned in the beginning of this answer gives you all the other way to center a table.
An elegant css cross-browser solution:
This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
See this post
edit thats center this is horizontal just change the neccecery css or see here!
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
I have two tables next to each other contained in a parent table's cell.
Is there any way (or trick one could use) to make both child tables fit the height of the parent cell with HTML and CSS?
So if a cell has more content than the other, they both would have the same height.
<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:thin solid black; width:600px;" align="center">
<tr>
<td>
<!--left table-->
<table cellpadding="0" border="0" cellspacing="0" style="width:86px; height:100%; background-color:#808080; margin-left:0px;" align="left">
<tr>
<td cellpadding="0" cellspacing="0" border="0" style="background-color:#808080; color:white;" align="center">
Fit the height of the right side?
</td>
</tr>
</table>
<!--right table-->
<table cellpadding="4" border="0" cellspacing="0" style="width:500px; height:100%;">
<tr>
<td align="left" height="42" valign="middle" cellspacing="0" border="0" style="background-color:#000000; padding-left:10px; color:white;">
Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
It's not possible to set a table height to 100% unless the parent has a fixed height (probably not what you want).
Therefore, I'd split that parent TD into two TDs with the desired background colors
<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:1px solid black; width:600px;" align="center">
<tr>
<td style="vertical-align:top; background: #808080; color:white; width:86px;">
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td align="center">
Fit the height of the right side?
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; background: #000000; color:white; padding-left:10px;">
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td align="left">
Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
I'd like to send a responsive newsletter. I know how to do it with my style.css
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">
<tbody>
<tr>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
image
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
text
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
text
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
but I have one problem.
In desktop looks great,
image text
text image
but in mobile
looks
image
text
text
image
and I want it like
image
text
image
text
I found Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and I was wondering if there is something like that in tables.
I tried to change align="center" with aling="left" and align="right" but nothing.
Can anyone help me?
Rather than getting the side-by-side effect by using two table cells (td's), you need to make each side a whole table, and use the align property on the table. This lets you have the left or right sides in either order when the email goes to one column.
Julie Ng's Antwort template has a good description + example of this technique:
https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29