Ive tried a slew of different topics to figure this out...so far nothing has worked. Take a look at this:
http://jsfiddle.net/zJTM8/
Notice how the price on the first example wont align vertically? I've tried 50% top, top -22px, etc. I'm not sure what I'm doing wrong here to make sure that both the product name and the product price stay mid aligned vertically on both divs.... I know its something easy I'm merely gapping on. THE CATCH is that it HAS TO WORK WITH IE7.
<div id="col_product_full">
<div style="padding: 1px;">
<table width="100%" border="0" cellspacing="0">
<tr>
<td align="center" class="contentselection_product_ImageCell">
<img src="http://76.73.18.245/olmsv2/DATA/MEDIA/PRODUCTS/201211038470.jpg">
</td>
</tr>
<tr>
<td height="44" class="contentselection_product_NameBar">
<div class="contentselection_product_Name" style="position: relative; display: block; float: left; width: 60%;">HP 8470p i5 1600 x 900 with Camera 320GB</div>
<div class="contentselection_product_Price" style="position: relative; z-index: 99; display: block; float: right; width: 30%;" align="right">$3,493.21</div>
</td>
</tr>
</table>
</div>
</div>
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
I'm struggling to set custom widths of div elements inside a table cell. Various questions (e.g.) talk about position and display parameters, and I've tried too many variation to describe without success. I'd greatly appreciate it if someone could either assist to get this minimal example working, or refer me to a specific previous answer that does actually solve this problem. Thanks in advance.
In the example I want to set the divs as horizontal bars to reflect the values. The table is fixed with and all div ancestors set to width: 100%.
.bar-column {
width: 100%;
}
.bar {
/* some other tested parameters.. */
/* position: absolute; */
/* display: block; float: left; */
/* display: table-cell; */
position: relative;
display: inline-block;
height: 100%;
background-color: yellow;
}
tr { width: 100%; }
<table width="600px" style="background-color: #ddd;">
<tr>
<th>Value</th>
<th class="bar-column">Name and bar</th>
</tr>
<tr>
<td>20</td>
<td class="bar-column">
<div width="50%" class="bar"><a class="link" href="#">twenty</a></div>
</td>
</tr>
<tr>
<td>40</td>
<td class="bar-column">
<div width="100%" class="bar"><a class="link" href="#">forty</a></div>
</td>
</tr>
<tr>
<td>10</td>
<td class="bar-column">
<div width="25%" class="bar"><a class="link" href="#">ten</a></div>
</td>
</tr>
</table>
The problem is using width="100%" for div when you need to use style="width:100%"
So for following line:
<div width="100%" class="bar"><a class="link" href="#">twenty</a></div>
Should be:
<div style="width:100%" class="bar"><a class="link" href="#">twenty</a></div>
Apply that for lines for the div containing 50% and 25%
I have a normal html code.
<span style="bottom: 65px;
position: relative;
left: 100px; color: red;">Hiii</span>
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050">
When I run this code, the text is centered.
But when I send this code to gmail, the look changes.
In gmail looks like
Here the text is not centered and when I inspected it I also found that all the css is not passed to gmail.
This CSS is not passed:
bottom: 65px;
position: relative;
left: 100px;
I need the text to always be centered whenever I send this html body to gmail/mail.
I recommend to use Tables for email. But as a quick fix for you, div will make it.
<div style="width:600px;">
<div style="text-align: center; color: #ff0000;">
Hello World. I'm in the center :)
</div>
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050" style="width: 100%;">
</div>
With tables (all centered):
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center">
Hello World. I'm in the center :)
</td>
</tr>
<tr>
<td align="center">
<img src="https://vignette.wikia.nocookie.net/sqmegapolis/images/2/2d/RealWorld_Stonehenge.jpg/revision/latest?cb=20150616102050" style="width: 100%">
</td>
</tr>
</table>
Trying to make a table with 3 horizontal images responsive by adding 100% to the table and then 100% to the images so they re-size according to screen, they previously had image sizes which were set to fit in 960px.
However, the first image is taller than the second - then the third image is smaller than the third.
How can I get these to fit equally and respond to the screen size using this table?
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td> <src="http://www.example.com/image/data/Home Page /myfirstitem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /myseconditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
<td><src="http://www.example.com/image/data/Home Page /mythirditem.jpg" style="border-style:solid; border-width:10px; width: 100%;"></td>
</tr>
</tbody>
</table>
Divs would be much easier to use instead of tables, as there is much more pre-defined styling in tables that can mess up responsiveness.
div {
padding: 0;
margin: 0 auto;
}
img {
width: 100%;
margin: 0 auto;
}
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
<img src="http://placehold.it/350x150" />
</div>
I have the following html code:
<table>
<tr>
<td>
<div id="fixmywidth" style="position:relative; height:30px;">
<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
<table style="height:inherit">
<tr style="height:inherit">
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
<td align="center" style="width: 31px; height: inherit;"> </td>
........300 tds later
<td align="center" style="width: 31px; height: inherit;"> </td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
how do i make the div with the id "fixmywidth" width fit the width of the containing elemets?
i tried width=100%
and widht = auto
but they wouldn't work
thanks a trillion in advance,
Lina
This is not possible because the div inside it is not actually inside it, because of the position relative/absolute.
Im not 100% sure what you are trying to accomplish there but if you remove those 2 it will size properly.
By "containing elements," do you mean the elements that contain <div id="fixmywidth"></dIv>, or the elements contained within <div id="fixmywidth"></div>?
If it's the latter, Fabian is right, and the issue lies here:
<div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;">
position: absolute; takes the <div> out of the document flow, so it takes up no space. Therefore, its containing element (<div id="fixmywidth"></div>) doesn't encompass any elements in the document flow, and therefore has no dimensions.
You can fix that by removing position: absolute;, but that may not fall in line with your layout goals.
remove position absolute from the immediate child of fixmywidth
if you remove position:relative from 'fixmywidth', it should work.