Pages rendering differently on the same site with the exact same HTML structure

[DermotMW]

Hi all,

I am working on a web site for a course assignment and I have 5 pages. The DOM for all is the same:

body
header
logo
nav
hamburger
content
title
gallery
left
right
footerleft
footerright

There is only 1 CSS file which styles all the pages. Four pages have the exact same actual layout

body
header
logo
nav
hamburger
content
left
right
footerleft
footerright

Yet when viewed one page in particular looks very different in layout:

Here is a standard page on left with the odd one on the right notice how everything is much higher up the page.


I have gone though the HTML line by line and they are identical (the right hand page was created by overwriting a copy of the left hand page) so my question is why are the elements appearing in different positions?

Left page HTML:
<!-- Content element -->
<div class="content">
<div class="contentleft">

<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/michelangelo2007.png" class="contentpicture" alt="Dermot Nolan, Master of Wine, pictured at the Michelangelo Competition in South Africa 2007">
</div>
<div class="flip-card-back">
<h3>Michelangelo Competition, South Africa, 2007</h3>
<p>
The Michelangelo tasting competition is held in South Africa every years and I have judgeed there in 2003, 2007, 2010, 2014 and 2017.
</p>
</div>
</div>
</div>


</div>

<div class="contentright">
<h1>Dermot Nolan, Master of Wine</h1>
<h2>Education</h2>

<p>
On this page are short details about my education and professional qualifications.

</p>

<table>
<tr>
<th>Year</th>
<th>Institution</th>
<th>Qualification</th>
</tr>
<tr>
<td>1997</td>
<td>The Institute of Masters of Wine</td>
<td>Master of Wine</td>
</tr>
<tr>
<td>2013</td>
<td>Dublin Business School</td>
<td>QQI Level 6 Diploma in Cloud Computing and Databases</td>
</tr>
<tr>
<td>2019</td>
<td>Dublin and D&uacute;n Laoghaire ETB</td>
<td>QQI Level 6 National Tour Guiding</td>
</tr>
<tr>
<td>2021</td>
<td>National College of Ireland</td>
<td>QQi Level 8 Certificate in Science in Computing</td>
</tr>
</table>


</div>

Right page HTML:
<!-- Content element -->
<div class="content">
<div class="contentleft">
<br>

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/vietnam2008.png" class="contentpicture" alt="A boat on the Mekong River, Vietnam 2008">
</div>
<div class="flip-card-back">
<h3>Vietnam, 2008</h3>
<p>
I was judging in Singapore and had a few days off which was a great opportunity to see a small bit of Vietnam. Go - it's fabulous.
<br>
This was on our way to a river restaurant where those brave enough could have snake for lunch!
</p>
</div>
</div>
</div>

</div>

<div class="contentright">
<h1>Dermot Nolan, Master of Wine</h1>
<h2>Hobbies</h2>

<p>

On this page is a list of hobbies I enjoy.

</p>

<table>
<tr>
<th>Hobby</th>
<th></th>
</tr>

<tr>
<td>Football</td>
<td>Spurs fan since 1969</td>
</tr>

<tr>
<td>Reading</td>
<td>mainly history, military history, detective novels, but will try anything once</td>
</tr>

<tr>
<td>Photography</td>
<td>see my <a href="newgallery.html">gallery</a></td>
</tr>

<tr>
<td>Games and puzzles</td>
<td>sudoku, crosswords, backgammon and more</td>
</tr>

<tr>
<td>Collecting Hawaiian shirts</td>
<td>someone has to do it</td>
</tr>

<tr>
<td>Poker</td>
<td></td>
</tr>

<tr>
<td>Travel</td>
<td>thankfully, working in wine is handy for this</td>
</tr>

<tr>
<td>Good food</td>
<td>thankfully, working in wine is also handy for this</td>
</tr>


</table>


</div>

On the other two pages with identical layout there is no such issue...

If you want code posted

All suggestions welcome

TIA

Dermot