I do not advocate using properties that are still under development, especially if there is no graceful fallback for non-supporting devices; therefore, my suggested code does not use the box-sizing property. That’s my preference and is no reflection on anyone else (call me a slow adopter, if you wish).
I suggest making the following change to the HTML:
from:
<td class="toptext">
<a name="top"></a>
<h1>MALTA NATURE TOURS</h1>
[color=red]<br>[/color]
<div class="introtxt_l">
text here
</div>
<div class="introtxt_r">
text here
</div>
</td>
to:
<td class="toptext">
<a name="top"></a>
<h1>MALTA NATURE TOURS</h1>
[color=blue]<div class="intro">[/color]
<div class="introtxt_l">
[color=blue]<p><span>introduction</span>... text here...</p>[/color]
</div>
<div class="introtxt_r">
[color=blue]<p><span>mission</span>... text here...</p>[/color]
</div>
[color=blue]</div>[/color]
</td>
In the above change, we add <div class=“intro”> and delete the <br> tag. Remember that <div class=“intro”> has a closing tag, too.
The text is changed by putting it in <p> tags and changing the <font> tags to <span> tags.
The new HTML with text should look like this:
<td class="toptext">
<a name="top"></a>
<h1>MALTA NATURE TOURS</h1>
<div class="intro">
<div class="introtxt_l">
<p><span>introduction:</span> Backed with 7 years of experience, MaltaNatureTours.com specializes in organising <b>guided nature walks</b> in Malta and Gozo. Identification and information about the <b>biodiversity</b> encountered is supplied in all tours. <b>Small groups</b> guarantee personal attention and a unique experience of the fantastic Maltese natural habitats. During these years, experience made these tours having the right balance of fun, education, non-exhaustive exercise, site seeing, plenty of magnificent views and with a touch of history in the <b>safest and best countryside areas</b> in the Maltese islands.</p>
</div>
<div class="introtxt_r">
<p><span>mission:</span> Our mission is to promote educatione, awarness and protection to the Maltese biodiversity and natural habiats. For several decades along the development of the country, these habitats were endangered; partly due to lack of awerness and partly due to the growing urbanisation. Major profits from these tours are directed to financially support environmental activities and websites needed to araise awareness and educate younger generations about the importance of our environment. For example, a part of the sister website - <a href="http://www.maltawildplants.com">Maltawildplants.com</a> is supported from such funds.</p>
</div>
</div>
</td>
The above HTML is supported by the following CSS. This CSS replaces whatever is currently in place. If in doubt, you can insert it at the bottom of the stylesheet or at top of the HTML page.
.intro {
overflow:hidden; /* because contents are floated */
padding-top:20px; /* space between intro boxes and "Malta Nature Tours" text */
padding-left:40px; /* space to the left of the intro boxes */
}
.introtxt_l,
.introtxt_r {
background-color:#ddd;
float:left;
margin-bottom:25px;
width:49%;
}
.introtxt_r {
margin-left:2%; /* The total width of the contents of div.intro must not exceed 100%; {width:49%} + {width:49%} + {margin-left:2%} = 100%. */
}
.introtxt_l p,
.introtxt_r p {
color:#000;
font-size:1em;
line-height:1.5;
margin:.5em 1em;
}
.introtxt_l p span,
.introtxt_r p span {
font-size:1.5em;
text-transform:uppercase;
}
This is a screenshot showing how it appears on my PC.
(“… my native tongue”)