Table overflowing on HTML page - html

I'm finishing up a midterm project for an HTMl course and I'm working on my last page. Problem is, the table overflows to the right (when the browser isn't maximized) and I can't figure out how to fix it. Can anyone help?
I can't post a pic. (No rep)
The HTML:
<div id="rightcolumn">
<h2>Fuel Cells</h2>
<!--3 Column by 3 Row Layout using a Table-->
<table width="100%" border="0" cellpadding="6">
<caption>Fuel Cells as a Source of Green Energy</caption>
<tr>
<td colspan="3">The research and development of fuel cells is extremely important. Fuel cells are an important technology because they use hydrogen to create energy. Hydrogen is the most plentiful element in our universe, quite unlike oil. If the US ran on fuel cells we would finally be independent from oil. Also, hydrogen doesn’t need to be “mined” like oil. If we no longer needed oil we would save on the price we have been paying for decades. Hydrogen is both extremely abundant and a renewable resource. If hydrogen was used as our primary power source we wouldn’t ever need to worry about running out of it, like we do with oil and other fossil fuels. A cloudy day can stop solar panels from generating much electricity and a still day can stop wind power. With hydrogen however, weather wouldn’t affect the quantity of power fuel cells produce. This makes fuel cells far more reliable than other, alternative forms of “green” energy.
</td>
</tr>
<tr>
<td ><img src="FuelCellDiagram.png" width="335" height="232" alt="How Fuel Cells Work" /></td>
<td><img src="FuelCellhome.png" width="345" height="250" alt="Fuel Cell Powering Home" /></td>
<td><img src="FCCar.GIF" width="400" height="347" alt="How Fuel Cells power Cars" /></td>
</tr>
<tr>
<td colspan="3">Fuel cells are important because of their harmless byproducts. Water and heat, the byproducts, aren’t dangerous and could actually be useful. The heat generated by fuel cells could be used to heat homes or water, making fuel cells even more efficient. Fuel cells would allow us to power our cars as well as our homes. This would lead to an end of the use of gasoline or battery powered vehicles. Although cars are becoming more efficient, they are unable to match the efficiency of fuel cells. Our current gas powered vehicles produce harmful pollutants during fuel combustion. Battery powered vehicles are also harmful because of the pollutants that are byproducts of both creating and disposing of them. If the world could end its dependence on oil and transition to fuel cells, our pollution levels would be a fraction of what they are now. In China, many cities are filled with smog because of the way they are powered. If China were to replace their coal plants with fuel cells, the ever increasing smog throughout China would begin to fade. Also, we would no longer have to worry about pollution from oil spills or oil wells.
</td>
</tr>
</table>
<!--End of Columns/Table-->
</div>
and the CSS is:
#container {
margin: auto;
width:80%;
min-width:700px;
background-color:#93A5C4;
color:#000000;
border: 2px double #000000;
}
#rightcolumn {
margin-left:140px;
background-color:#ffffff;
color:#000000;
padding:10px;
}
td, tr, th {
padding: 10px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
I can't edit the rightcolumn CSS though because I need it like that to display the other pages properly and I'm only allowed to use one CSS sheet for the entire site.

A quick solution would be to add a style of "overflow:scroll" in your declaration for the rightcolumn div.
<div id="rightcolumn" style="overflow:scroll">

Related

Colspan issue in Chrome 91?

I think I'm losing my mind, here is some very simple code. It works perfect in Firefox, but since the recent Chrome update (Version 91.0.4472.114), Chrome seems to ignore the width of cell 1 once colspan appears later in the table.
Any ideas?
<table width='773' border='3' cellspacing='0' cellpadding='0'>
<tr>
<td colspan='3'>Testing
</td>
</tr>
<tr><td width='260'>hello</td><td width='126'>hello</td><td width='387'>hello</td></tr>
<tr><td width='260'>hello</td><td colspan='2'>Nuclear fission was discovered in December 1938 by physicists Lise Meitner and Otto Frisch, and chemists Otto Hahn and Fritz Strassmann. Fission is a nuclear reaction and process of radioactive decay in which the nucleus of an atom splits into two or more smaller, lighter nuclei. The fission process releases a very large amount of energy. The discovery that a nuclear chain reaction was possible led to the development of nuclear power and nuclear weapons. Hahn and Strassmann bombarded uranium with slow neutrons, and discovered that barium had been produced (illustration pictured). Meitner and her nephew Frisch theorised, and then proved, that the uranium nucleus had been split, and published their findings in Nature. Meitner calculated that the energy released by each disintegration was approximately 200 megaelectronvolts, and Frisch observed this. By analogy with the division of biological cells, Frisch named the process "fission".</td></tr>
</table>

Nested tables in email

So, I'm totally losing my mind with an email that I'm trying to format.
I think it has to do with a particular nested table.
The main table is 650px wide and the width of the nested table is set to 100%.
What's happening is that, as soon as I plug in the nested tables, the header and footer images are being reduced by 20px(10+10) on the right side(despite both images being 650 pixels wide).
When I modify the nested tables to make the cellspacing on both sides of the nested tables =0(originally 10px on both sides i.e. 20px in total), then the header and footer images line up correctly but, assuming the cellspacing is set to 10 px on each side of the nested table, then the header and footer images get reduced.
Why is the nested table cellspacing affecting my table header and footer images?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2020 Preferred Share Outlook with Fiera Capital</title>
<style type="text/css">
<!--
html, body {
font-family: Arial, Helvetica, sans-serif;
color: #444;
font-size: 17px;
line-height:30px;
background-color: #FAFAFA;
}
img {
border:none;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
.disclaimer {
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
line-height:16px;
}
.title {
color: #F60;
font-weight: bold;
font-size: 18px;
line-height: 25px;
}
.title2 {
color: #F60;
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
a:link {
color: #F60;
}
a:visited {
color: #F60;
}
a:hover {
color: #F60;
}
a:active {
color: #77881c;
}
.orange {
color: #F60;
}
.disclaimer{
padding:15px;
}
.table_data {
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
border-color: #FDFDFD;
line-height:12px;
}
.disclaimer1 { font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 11px;
line-height:16px;
}
.details {
font-size: 13px;
line-height:20px;
}
-->
</style>
</head>
<body style="margin: 0;">
<table width="101%" height="100%">
<tr>
<td><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650">
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Email_Header.png" alt="2020 Preferred Share Outlook with Fiera Capital" style="border:none"/>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 20px 20px 20px;">
<p class="title">Get the Latest Outlook from Fiera Capital on the Canadian Preferred Shares and Fixed Income Markets</p>
<p>The Canadian preferred share market has bounced back from its lows in Q3 2019. But Fiera Capital believes there is still significant potential upside left in this asset class, since preferred shares offer higher relative yields compared to bonds, and should have less pressure from new issuances in 2020.</p>
<p>Fiera Capital’s Nicolas Normandeau, lead portfolio manager for the Horizons Active Preferred Share ETF (HPR) and the Horizons Floating Rate Preferred Share ETF (HFP), will outline his team’s outlook for Canadian preferred shares in 2020, and why he feels they remain a potentially attractive option for Canadian fixed income investors.</p>
<p><img src="http://horizonsetfs.com/horizons/media/emails/common-images/register_en.png" alt="Register for the webinar Now" style="border:none"/></p>
<table width="100%" cellspacing="10" cellpadding="10" border="0">
<tbody>
<tr>
<td width="50%" bgcolor="#EEEEEE"><br><span class="title"><strong>Advisors and Investors Bullish in New Decade<br>
<a href="https://www.horizonsetfs.com/sentimentsurvey" target="_blank"><br>
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Sentiment-Survey.jpg" alt="Sentiment Survey Results" style="border:none"></a><br>
</strong></span><br>
Did you miss our Q1 2020 Sentiment Survey Results? See where Canadian advisors and investors stand on 14 different indices and asset classes, ranging from the NASDAQ-100® to Gold Bullion.<br> <p>Stay tuned for our Q2 2020 Sentiment Survey in March – you could win a $150 Amazon gift card!</p>
</td>
<td width="" bgcolor="#EEEEEE">
<span class="title"><strong>Just Launched: Three New Total Return ETFs</strong></span><br>
<a href="https://www.horizonsetfs.com/news/Press-Release/Horizons-ETFs-Launches-Three-New-Total-Return-ETFs" target="_blank"><br>
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Market-Open-pic.png" alt="Launch of new Total Return ETFs" style="border:none"></a><br>
On February 6, 2020, Horizons ETFs launched three new ETFs: HULC, HSAV, as well as HXCN. With $1 billion in seed capital, HXCN is the largest ETF launch in Canadian history. Learn more about our new total return ETFs <br> <br> <br> <br>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellpadding="0">
<tbody>
<tr>
<td width="30%">
<img src="https://www.horizonsetfs.com/horizons/media/emails/2020/202002_FieraWebinar/Nicolas-Normandeau.png" alt="Nicolas Normandeau, CFA®, M.SC." style="border:none"/><span class="orange"><strong>Nicolas Normandeau</strong></span>
<br>
<strong><span style="font-size: 12px;">CFA®, M.SC. – Vice-President and Portfolio Manager, Fixed Income, Fiera Capital</span></strong>
</td>
<td width="70%">
<em>Nicolas Normandeau is a member of Fiera Capital’s Corporate Fixed Income team and a portfolio manager for the firm’s Corporate Fixed Income strategy with 10 years of industry experience. Fiera Capital is one of Canada’s largest managers of fixed income investments and is the sub-advisor for many of Horizons ETFs’ fixed income funds.</em>
</td>
<br>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="650"><img src="https://www.horizonsetfs.com/horizons/media/emails/common-images/footer_en.jpg" alt="Horizons Exchange Traded Funds" /></td>
</tr>
<tr>
<td class="disclaimer"><p class="disclaimer1">*Plus applicable sales taxes.</p>
<p class="disclaimer1">Commissions, management fees and expenses all may be associated with an investment in exchange traded products managed by Horizons ETFs Management (Canada) Inc. (the "Horizons Exchange Traded Products"). The Horizons Exchange Traded Products are not guaranteed, their values change frequently and past performance may not be repeated. The prospectus contains important detailed information about the Horizons Exchange Traded Products. <strong>Please read the relevant prospectus before investing.</strong></p>
<p class="disclaimer1">Certain statements may constitute a forward looking statement, including those identified by the expressions “anticipate”, “estimate” or “expect” and similar expressions (including grammatical variations thereof) to the extent they relate to the ETFs or Horizons ETFs. The forward-looking statements are not historical facts but reflect the ETFs, the ETF’s managers or Horizons ETFs current expectations regarding future results or events. These forward-looking statements are subject to a number of risks and uncertainties that could cause actual results or events to differ materially from current expectations. These and other factors should be considered carefully and readers should not place undue reliance on the ETFs’ forward looking statements. These forward-looking statements are made as of the date hereof and the ETFs do not undertake to update any forward-looking statement that is contained herein, whether as a result of new information, future events or otherwise, unless required by applicable law.</p>
<p class="disclaimer1"><sup>1</sup>Horizons Total Return ETFs (“Horizons Total Return ETFs”) are generally index-tracking ETFs that use an innovative investment structure known as a Total Return Swap to deliver the returns of an underlying benchmark in a low-cost and tax-efficient manner. Unlike a physical replication ETF that typically purchases the securities found in the relevant benchmark in the same proportions as the benchmark, most Horizons Total Return ETFs use a synthetic structure that never buys the securities of a benchmark directly. Instead, the ETF receives the total return of the benchmark through entering into a Total Return Swap agreement with one or more counterparties, typically large financial institutions, which will provide the ETF with the total return of the benchmark in exchange for the interest earned on the cash held by the ETF. Any distributions which are paid by the benchmark’s constituents are reflected automatically in the net asset value (NAV) of the ETF. As a result, the Horizons Total Return ETF receives the total return of the benchmark (before fees), which is reflected in the ETF’s share price, and investors are not expected to receive any taxable distributions. Certain Horizons Total Return ETFs use physical replication instead of a total return swap, which includes HULC and HSAV. The Horizons Cash Maximizer ETF does not track a traditional benchmark but rather a compounding rate of interest paid on a cash deposit that can change over time.</p>
<p class="disclaimer1">In the past you have provided Horizons ETFs with your email address or your email address is publicly available. You will receive brief news announcements regarding our ETFs and related topics. If you no longer wish to receive these announcements, you may unsubscribe by clicking here and updating your user preferences.</p>
<p class="disclaimer1">Click here to read our Privacy Policy.</p>
<p class="disclaimer1">Horizons ETFs Management (Canada) Inc.<br />
55 University Avenue, Suite 800<br />
Toronto, Ontario, M5J 2H7</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Header and footer images are not being reduced at all, they are correctly displaying at 650px width.
The horizontal padding on the <td> containing the nested tables is causing your main table to shift from 650px to 690px (650 + 20 + 20 = 690), and so causing the images not filling the main table's width.
Changing this line
<td align="left" style="padding: 15px 20px 20px 20px;">
To, for example
<td align="left" style="padding: 15px 0 20px 0;">
Solves the issue
Thanks for that Facundo!
Only problem with that approach is that that it strips out the padding on the entire body copy (which is fairly easily added back via a class)
Is there another way to achieve this result?

HTML Email Images

I've just been given a take home exam for a job as an email developer. My task is to try my best to create an HTML email out of a .png file. I've been using tables, and I've come to a section where I have to insert an image alongside text, and I'm crashing and burning. The header text is too far displaced from the paragraph, and the image doesn't sit well; does anyone have any ideas on how to resolve the issue? My code is as follows:
div #costume-section {
width:645px;
height: 225px;
padding-left: 05px;
background: #ff821d;
color: white;
}
<div id="costume-section">
<table>
<th id="cos-font">Costume Contest</th>
<tr>
<td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
👋 Rachelledev
Think about this like you are working in a spreadsheet. You have set a th and a tr table row.
Since you have your header text outside of the row containg the 2 td's the header text sits on top of the tr containing the text and the image.
Rearranging the table markup you don't really need the th in this scenario unless its a requirement.
<div id="costume-section">
<table>
<tr>
<td>
<h1>Costume Contest</h1>
Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>

HTML TD width not taking effect

I've got two TD's at the bottom left of my HTML email layout, but the first is not taking effect of the 140px width I've set, any obvious reason why?
http://jsfiddle.net/5xqvj/
<td class="blue-table" width="375px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" />
</td>
</tr>
<tr>
<td class="blue-table" width="20px"></td>
</tr>
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" />
</td>
</tr>
<tr>
<td>
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
<tr>
<td width="140px">
<p><strong>Cars</strong><br />
2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
</p>
</td>
<td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
</tr>
</table>
</td>
Looks like you've got two cells in your final row - and only one cell in each row above that. This means your table is effectively two columns wide, with the picture of the car in a tacked-on column by itself. This will be messing up the width calculations.
One way to handle this is to make the one-cell rows span two columns each, and leave the two-cell row as is. colspan will do this, and it is applied something like this:
<tr>
<td colspan="2">
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
You need to do this to every row.
This should give your width settings more predictable results.
You can double-check your table layout by giving your table cells a temporary border with CSS like this:
td {
border: 1px solid red;
}
Edit
Potentially a better solution would be to use CSS, and float: right the picture of the car (add a margin or padding to put some space around it). Then you can treat everything inside <td class="blue-table" width="375px" valign="top"> like a normal set of paragraphs and images and avoid colspan altogether. There is a long post about the merits or otherwise of using tables for layout here if you're interested: Why not use tables for layout in HTML?
Try this:
<td width="140">
or
<td style="width: 140px">

Changing 3 column 4 row HTML table to Divs

I basically have my page layout, however I have put my main content in a table in my main div. I need to change this up so I no longer have a table, instead have it all in divs. Below is my code for my main div and screenshot of the design, help would be appreciated.
<div id="mainDiv">
<h1>Places to go</h1>
<div id="divBreak"></div>
<table id="mainTable" rules="ROWS" frame="HSIDES">
<tr>
<td id="table1"><strong>Leeds Castle</strong><br>
Considered one of the most romantic castles in England, this historic site was originally the stately home of the Saxon royal family during the reign of Ethelbert IV in 856-860.</td>
<td id="table2"><img class="imageTable" src="./images/leeds.jpg" alt="leeds" name="imageTable"></td>
<td id="columnRight" rowspan="4"><strong>Welcome to Maidstone</strong><br>
Maidstone is the county town of Kent, England, 32 miles (51 km) south-east of London. The River Medway runs through the centre of the town linking Maidstone to Rochester and the Thames Estuary. Historically, the river was a source and route for much of the town's trade. Maidstone was the centre of the agricultural county of Kent, known as the Garden of England. There is evidence of a settlement in the area dating back to beyond the Stone Age. The town is within the borough of Maidstone. In 2001, the town had a population of 75,070. Maidstone's economy has changed over the years from being involved in heavy industry, to more light and service industries.<br>
<br>
<br>
<br>
<br>
<strong>Where we are</strong> <img src="./images/maidstone_map.gif" alt="Maidstone Map"> </td>
</tr>
<tr>
<td id="table3"><strong>Mote Park</strong><br>
Maidstone's largest park, is set in 450 acres of historic parkland. Within walking distance of Maidstone town centre it offers a pleasant and relaxing enviroment, making it a great place to spend the day.</td>
<td id="table4"><img class="imageTable" src="./images/mote.jpg" alt="Mote Park" name="imageTable"></td>
</tr>
<tr>
<td id="table5"><strong>History Museum</strong><br>
Our exceptional Museum is housed in a charming Elizabethan Manor House, in the centre of Maidstone - Kent's County Town. Each gallery will fascinate and surprise; with a wealth of exhibits and objects to see and enjoy as well as regular storytelling and children's holiday activities. Entry to our Museum is Free!</td>
<td id="table6"><img class="imageTable" src="./images/museum.jpg" alt="Maidstone Museum" name="imageTable"></td>
</tr>
<tr>
<td id="table7"><strong>River Boat</strong><br>
The Kentish Lady river boat offers a unique experience of the River Medway from a 1 hour trip to 3 hour cruises and is also the perfect setting for a private party.</td>
<td id="table8"><img class="imageTable" src="./images/boat.jpg" alt="Boat" name="imageTable"></td>
</tr>
</table>
</div>
divs are block elements and naturally display one below the other (vertically) as opposed to inline elements like spans that display one after each other horizontally.
Knowing that you can alter this default behavior easily. This is a very simple 5 minute tutorial that will show you how to create table like display with divs http://www.barelyfitz.com/screencast/html-training/css/positioning/ .