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.
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've been developing a website with a friend and I have a little problem.
We need to set our footer manually in the page with position:relative and margin-top to fix it because it isn't following the last <tr< end.
I've been trying to fix this problem around 3 weeks and I'm really frustrated with this...
The "footer" <tr> is following the "right-column" <tr>, but even I if I try to remove it, it tries to get aligned with a tr in the top of the page instead of the "container" <tr>
I'm posting the last lines of the code here, but since I have no idea of what is causing this, I'm sending below the website link itself.
My website is onlinewinxclub.com/centro-web/test.php
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php"></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><video
class="file" preload="metadata"
poster="././medias/images/Video_Thumbs/happy2021thumb.png"
src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle"
style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext"
style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and
specialists are hoping it will be better than the last one. The witches? Not
sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<img onclick="javascript:Previous();" class="previous"
style="position: relative; top: 274px; left: 541px; cursor: pointer;"
src="././medias/images/arrow_left.png"
onmouseover="this.src='././medias/images/arrow_left_hover.png';"
onmouseout="this.src='././medias/images/arrow_left.png';">
<img onclick="javascript:Next();" class="next"
style="position: relative; top: 274px; left: 625px; cursor: pointer;"
src="././medias/images/arrow_right.png"
onmouseover="this.src='././medias/images/arrow_right_hover.png';"
onmouseout="this.src='././medias/images/arrow_right.png';">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number"
style="color: white; font-family: Arial; font-size: 20px; height: bold; text-shadow: 1px 0px 0px #560027;">
1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php">Browser not
compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser
not compatible.</iframe>
</div>
<iframe style="position: relative;width: 703px;height: 219px;margin-left: -467px;margin-top: -91px;"
frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="././medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
first remove the
#container - position absolute
I think you are positioning it because of the iframe. why don't you add iframe with the .container_middle_column? you can add td and give a width or create new table inside the td, because you are using table. And make #footer - posision relative. If you use bootsrap it will be easy more than this.
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>
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>
How to make the div height to 100% so that if i change the div color the whole td color should be changed
<table style="table-layout:fixed;width:100%;" border="1" cellpadding=0 cellspacing=0>
<tr>
<td width="20%" height="70px" align="center">
<div class="step step1" style="display:block;" step="1">
Video<p align="center"> <img id="img1" src="/media/img/accept.png" /><img id="img2" src="/media/img/close.gif" /></p>
</div>
</tr>
</table>
You just need height: 100%; in your styling, like this:
<div class="step step1" style="display:block; height: 100%;" step="1">
You can test it out here. However, you're missing a </td> which will give odd behavior in certain DOCTYPEs (it is valid in some), make sure to close that table cell to be safe. One other note, unless you have it overridden somewhere, there's no need for the display: block;, that's the default display for a <div> element.
Why don't you change the td's color?
div's style:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
Why don't you set the td color then?
<td width="20%" height="70px" align="center" style="background-color:Orange;">
<td style="height: 100%"><div style="height: 100%"></div></td> to be explicit, but by default it should be the whole height and width of the td provided the td and table have a height.