How to convert older website done in Tables to Div tags and CSS, I have been unable to convert my tables layouts to a modern layout Options

[chris montez]

Hello I have always used tables for layouts and have been unsuccessful learning div tags and CSS. I would be grateful if someone could convert this table to a modern presentation as I am transitioning to a responsive website and don't know how tables react to that:

<table width="1200" border="0" cellspacing="3" cellpadding="3" align="center">
<tr>
<td height="25" align="center"> <p4>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</p4></td></tr></table>
<br>
<table width="1000" border="0" cellspacing="10" cellpadding="2" align="center">
<tr>
<td width="330" align=center ><a href="../totalrace/index.htm"><p5>21 Day Ultimate Iditarod Experience</p5>
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</td>

<td width="330" align=center ><a href="../startcombo/index.htm"><p5>11 Day Race Start / Checkpoints</p5><img src="Dallaswillow.jpg" width="330" height="219" alt="11 Day Race Start and Checkpoints">
</a>
March 02- March 12, 2021</td>

<td width="330" align=center> <a href="../finishcombo/index.htm"><p5>14 Day McGrath / Nome Finish Tour</p5><img src="14dayfinish.jpg" width="330" height="219
" alt="14 day finish">

</a>
March 8- March 22, 2021</td>

</tr>
<tr><td width="1000" height="20"></td></tr>
<tr>
<td width="330" align=center><a href="../nome/index.htm"><p5> 10 Day Nome Finish Tour</p5><img src="10daynomefinish.jpg" width="330" height="219" alt="10 Day Nome Finish Tour">

</a>
March 13- March 22, 2021</td>

<td width="330" align=center><a href="../iditarod/index.htm"><p5>6 Day Race Start Tour</p5><img src="6dayracestart.jpg" width="330" height="219" alt="6 Day Race Start Tour">

</a>
March 02 - March 08, 2021</td>

<td width="330" align=center><a href="../mcgrath/index.htm"><p5>5 Day Checkpoints Tour</p5><img src="5daymcgrath.jpg" width="330" height="219" alt="5 Day Checkpoint Tour">

</a>
March 08 - March 12, 2021</td>

</tr>
<tr><td width="1000" height="20"></td></tr>
<tr>


<td width="330" align=center><a href="../nome/index.htm"><p5>14 Day Nome Finish &amp; Northern Lights </p5>
<img src="images/bettlesaurora.jpg" width="330" height="219" alt="14 Day Nome Finish and Bettles Lodge"></a>
March 08 - March 22, 2021</td>
<td width="330" align=center>&nbsp;</td>

<td width="330" align=center> <a href="../racestartnorthernlightscombo/index.htm">
<p5>11 Day Race Start &amp; Northern Lights </p5><img src="suefarraurora.jpg" width="330" height="219" alt="11 Day Race Start and Northern Lights">

</a>
March 02 - March 12, 2021</td>

</tr>
</table>

[Christian J]

I am transitioning to a responsive website and don't know how tables react to that

You can still use tables for tabular data (but then preferably without a fixed width). This doesn't look like tabular data though.

<table width="1200" border="0" cellspacing="3" cellpadding="3" align="center">
<tr>
<td height="25" align="center"> <p4>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</p4></td></tr></table>

The above looks like a heading, so let's use that:

CODE

<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

(BTW here's no such thing as a P4 element).

<td width="330" align=center ><a href="../totalrace/index.htm"><p5>21 Day Ultimate Iditarod Experience</p5>
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</td>

Each cell like the above might be replaced with something like:

CODE

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

(There's no P5 element either). The only exception is the second-last empty cell. Do you want an empty space like that?

[Christian J]

For the styling, I also add a container around the P elements:

CODE

<div class="container">
...
</div>

Finally here's the actual styling, with comments inside /* and */:

CODE

<style>

h1 {
font-weight: normal; /* Removes the default bold style of H1 elements. */
font-size: 100%; /* Normal text size. */
text-align: center; /* Centers the text. */
}

div.container {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the DIV container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside the DIV, the actual P elements are centered too with "text-align: center" --this only works here because the Ps are styled as "display: inline-block" (see below). */
}

p {
display: inline-block; /* This makes each P element line up in a row that can also be centered, just like inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}

p img {display: block;} /* This makes each IMG a block element inside each P, so that the text appears on their own lines above and below the IMG. */

</style>

If you only have one page like this, you can put the above STYLE element in the page's HEAD section (if you have several pages with the same layout, it might be more practical to use an external stylesheet file though).

[chris montez]

For the styling, I also add a container around the P elements:

CODE

<div class="container">
...
</div>

Finally here's the actual styling, with comments inside /* and */:

CODE

<style>

h1 {
font-weight: normal; /* Removes the default bold style of H1 elements. */
font-size: 100%; /* Normal text size. */
text-align: center; /* Centers the text. */
}

div.container {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the DIV container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside the DIV, the actual P elements are centered too with "text-align: center" --this only works here because the Ps are styled as "display: inline-block" (see below). */
}

p {
display: inline-block; /* This makes each P element line up in a row that can also be centered, just like inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}

p img {display: block;} /* This makes each IMG a block element inside each P, so that the text appears on their own lines above and below the IMG. */

</style>

If you only have one page like this, you can put the above STYLE element in the page's HEAD section (if you have several pages with the same layout, it might be more practical to use an external stylesheet file though).

I put the style code in the head section and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row. But the <p> elements are still lining up in a centered column. Here is what the web page should look like: https://iditarodtours.com/newindex2020.htm As you can see the whole page is laid out in tables as I have been using the same basic layout for 20+ years and tables and frames is how we did it when I learned this. Any suggestion what might be causing a single column instead of 2 rows?

[Christian J]

and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row.

No, only use one container with all the P elements inside it:

CODE

<div class="container">
<p></p>
<p></p>
<p></p>
...
</div>

[chris montez]

and put the <div class="container">
... at the start of each row and the </div> at the end of each row with 4 <p></p> elements in each row.

No, only use one container with all the P elements inside it:

CODE

<div class="container">
<p></p>
<p></p>
<p></p>
...
</div>

This is the code I have put in place of the table and instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

<div class="container">
<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>
<img src="images/fulltour.jpg" width="400" height="300" alt="21 Day Tour"> </a>
March 02- March 22, 2021 </p>
<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

<p><a href="../startcombo/index.htm">
<h1>11 Day Race Start / Checkpoints</h1>
<img src="images/_DSC0078 copy.jpg" width="400" height="300" alt="Racing Dogs"></a>
March 02- March 12, 2021</p>
<p style="text-align:left">Lunging, jumping sled dogs straining to start the Race. Five days on the trail seeing the teams and mushers </p>
<p style="text-align:right"><img src="images/button.jpg" width="119" height="31" alt="button"></p>


<p><a href="../finishcombo/index.htm">
<h1>14 Day McGrath / Nome Finish Tour</h1>
<img src="images/bakerfinish400.jpg" width="400" height="300" alt="baker">
</a>
March 8- March 22, 2021</p>
<p style="text-align:left">McGrath, Nikolai, Takotna, Unalakleet, White Mountain, Nome, Dog mushing, Helicopter ride, the Race finish</p>
<p style="text-align:right"><a href="../finishcombo/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>



<p><a href="../nome/index.htm">
<h1> 10 Day Nome Finish Tour</h1>
</a><img src="images/dallas-finish400.jpg" width="400" height="300" alt="Dallas Seavey">March 13- March 22, 2021
<p style="text-align:left">Be there at the finish line in Nome cheering on your favorite musher as they cross under the Burl Arch
<p style="text-align:right"><a href="../nome/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

<p><a href="../iditarod/index.htm">
<h1>6 Day Race Start Tour</h1>
<img src="images/smithsonian300400.jpg" width="400" height="300" alt="siberians">
March 02 - March 08, 2021
</p>
<p style="text-align:left">Experience the unmatched excitement of hundreds of screaming, lunging sled dogs ready to start their journey </p>
<p style="text-align:right"><a href="../iditarod/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>


<p><a href="../mcgrath/index.htm">
<H1>5 Day Checkpoints Tour</H1>
<img src="images/_DSC0066400.jpg" width="400" height="300" alt="Checkpoint dogs"> </a>
March 08 - March 12, 2021</p>
<p style="text-align:left">Four nights on the Iditarod Trail at the McGrath checkpoint with day trips to Nikolai and Takotna checkpoints</p>
<p style="text-align:right"><a href="../mcgrath/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>



<p><a href="../nome/index.htm">
<H1>14 Day Nome Finish &amp; Northern Lights </H1>
<img src="images/randy400.jpg" width="400" height="300" alt="Randy"> </a>
March 08 - March 22, 2021</p>
<p style="text-align:left"> Come celebrate the winning musher crossing under the Burl Arch before traveling to Bettles for Aurora displays</p>
<p style="text-align:right"><a href="../nome/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p></td>
<td width="330" align=center><img src="indexdogs.jpg" width="390" height="390" alt="dogs"></td>

<p><a href="../racestartnorthernlightscombo/index.htm">
<H1>11 Day Race Start &amp; Northern Lights </H1>
<img src="suefarraurora400.jpg" width="400" height="300" alt="Arora display Bettles Lodge"> </a>
March 02 - March 12, 2021</p>
<p style="text-align:left">All the excitement of the Race Start, the Mushers Banquet, dog mushing plus the Aurora in Bettles</p>
<p style="text-align:right"><a href="../racestartnorthernlightscombo/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>


</div>

[Christian J]

instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

I made the layout responsive in such a way that the number of columns depends on the viewport width. But there are also HTML errors:

<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>

You can't put a H1 element inside a P (I only used the H1 for the top heading of the page). Also you can't nest P elements. This is the HTML structure I used:

CODE

<div class="container">

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

</div>

The following content wasn't part of the original post, not sure how you want it to look:

<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

[chris montez]

instead of getting 2 rows of 4 <p></p> elements I have one vertical column:

I made the layout responsive in such a way that the number of columns depends on the viewport width. But there are also HTML errors:

<p width align=center ><p><a href="../totalrace/index.htm">
<h1>21 Day Ultimate Iditarod Experience</h1>

You can't put a H1 element inside a P (I only used the H1 for the top heading of the page). Also you can't nest P elements. This is the HTML structure I used:

CODE

<div class="container">

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

<p>
<a href="../totalrace/index.htm">
21 Day Ultimate Iditarod Experience
<img src="21day.jpg" width="330" height="221" alt="21 day Tour"></a>
March 02- March 22, 2021
</p>

</div>

The following content wasn't part of the original post, not sure how you want it to look:

<p style="text-align:left">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p style="text-align:right"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="button"></a></p>

In each paragraph there is a centered title, there is an image underneath, underneath that there is a line of centered text with the dates , underneath that there is text aligned to the left, underneath that and aligned to the right there is a button.The original styling code I used is below, it allowed me to change the style of each line of text. But you said the <p4> <p5> etc... wasn't usable. If I have them defined in the style section can I still use them or should I switch them to h1, h2, h3 ....?

<STYLE type=text/css>
A:link {
COLOR: #330000; TEXT-DECORATION: none
}
A:visited {
COLOR: #330000; TEXT-DECORATION: none
}
A:active {
COLOR: #33000 text: none
}
A:hover {
COLOR: #ff6666; TEXT-DECORATION: none
}

p {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:left;

}

p2 {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;

}
.blue {
color: #00F;
}

p3 {
font-family-: Georgia, serif;
font-size: 16px;
color:#333;
text-align: left;
}

p4 {
font-family-: Georgia, serif;
font-size: 30px;
color:#333;
text-align: center;
}

p5 {
font-family-: Georgia, serif;
font-size: 20px;
color:maroon;
text-align: center;
}
p6 {
font-family-: Georgia, serif;
font-size: 25px;
color:#333;
text-align: center;
}
p7 {
font-family-: Georgia, serif;
font-size: 22px;
color:#300;
text-align: right;
}

img.left { float:left }
img.right {float:right }
</STYLE>

[pandy]

You can't invent your own elements. Period. You have to make do with those that exist.

[pandy]

What you probably are looking for are classes.

Instead of...

CODE

p2 {
font-family-: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}

...you can have this (I correced a mistake you had, font-family-).

CODE

p.2 {
font-family: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}

Then you go like this in the HTML.

CODE

<p class="2">Whatever... </p>

It's better though that you come up with names that means something for you classes. 1, 2 and so on is hard to remember what they are for.

[Darin McGrew]

...you can have this (I correced a mistake you had, font-fmily-).

CODE

p.2 {
font-family: Georgia, serif;
font-size: 18px;
color:#300;
text-align:right;
}

Then you go like this in the HTML.

CODE

<p class="2">Whatever... </p>

It's better though that you come up with names that means something for you classes. 1, 2 and so on is hard to remember what they are for.

But note that class labels cannot start with a digit:
https://www.w3.org/TR/CSS21/syndata.html#characters

So the HTML should be something like

CODE

<p class="x2"> ... </p>

and the CSS should be something like

CODE

p.x2 { ... }

Or better yet, use something with meaning rather than "x2".

[pandy]

Ah! Forgot about that CSS makes that addition. I checked the HMTL spec since I wasn't totally sure if is was both class names and IDs that have that limitation or only IDs. In HTML class names can start with a digit, as I understand it. Strange, really, since classes hardly had any use before CSS. Maybe the no beginning digit thing came with CSS2? Must check that out of curiousity.

[pandy]

Didn't find it in the CSS1 spec, but validators/checkers say no to leading digits for CSS1 too.

Now I found it.
https://www.w3.org/TR/REC-CSS1/#forward-compatible-parsing

Hmm. Does that mean it was changed for forward compatibility reasons?

[Christian J]

Now I'm getting a bit off-topic (the topic-starter can safely ignore this), but https://mathiasbynens.be/demo/crazy-class escapes the CSS selector for this HTML:

CODE

class="123"  

like this:

CODE

.\31 23 { background: lime; }

(note the space). An explanation is given on https://mathiasbynens.be/notes/css-escapes

[Christian J]

But you said the <p4> <p5> etc... wasn't usable. If I have them defined in the style section can I still use them or should I switch them to h1, h2, h3 ....?

In practice you can actually invent elements that don't exist (like P4) and style them with CSS (all my newer browsers support this), but it's much better to stick with existing HTML elements since they have a defined function or semantic meaning. This is especially important for search engines or voice browsers, that may only see the HTML structure of your page but none of the styling.

[Christian J]

Here's a new version! I changed a lot of the HTML structure in order to accomodate the extra P elements at the bottom.

I also changed the images' ALT texts. The first IMG really doesn't need one, since the H2 text performs that function (but the HTML spec still wants you to use an empty ALT attribute value). The second IMG's ALT text might be empty too, since it's the same link as the first, but I used the text "Read more" anyway to avoid a potentially confusing empty link.

CODE

<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

<main>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

</main>

Here's the new CSS:

CODE

body {
color: #000;
background: #fff;
}

h1 {
font-weight: normal;
font-size: 140%;
text-align: center;
}

h2 {
font-weight: normal;
font-size: 120%;
text-align: center;
color: maroon;
background: #fff;
}

main {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the MAIN container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside MAIN, the SECTION elements are centered too with "text-align: center" --this only works here because SECTIONs are styled as "display: inline-block" (see below). */
}

section {
width: 330px; /* same as the image or maybe slightly larger */
display: inline-block; /* This makes the SECTION elements line up in a row that can be centered, similar to inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}


a:link, a:visited, a:active {
text-decoration: none;
color: #300;
background: #fff;
}
a:hover {
color: #f66;
background: #fff
}

p {
font-family: Georgia, serif;
font-size: 18px;
color: #300;
background: #fff;
}

p.date {text-align: center;}
p.description {text-align: left;}
p.button {text-align: right;}

[chris montez]

Stlll the same issue of the elements lining up in one centered column instead of 3 separate rows with 3 elements in each row.

[Christian J]

Stlll the same issue of the elements lining up in one centered column instead of 3 separate rows with 3 elements in each row.

If my example doesn't work please post the code of the whole page you're working on.

But didn't you want a responsive page? If so, the number of rows and columns may depend on the width of the browser window (that's how my layout is meant to work). There are other approaches of course, such as using a 3x3 grid layout for desktop browsers and a single column for mobile.

[chris montez]

Here is the code for the page and on my 21in desktop monitor I get 3 rows with one section in each row instead of 1 row with 3 sections in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

body {
color: #000;
background: #fff;
}

h1 {
font-weight: normal;
font-size: 140%;
text-align: center;
}

h2 {
font-weight: normal;
font-size: 120%;
text-align: center;
color: maroon;
background: #fff;
}

main {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
width: 80%; /* Here the MAIN container is centered using a trick from combining an explicit "width" with "auto" values for the left and right margins. */
text-align: center; /* Inside MAIN, the SECTION elements are centered too with "text-align: center" --this only works here because SECTIONs are styled as "display: inline-block" (see below). */
}

section {
width: 330px; /* same as the image or maybe slightly larger */
display: inline-block; /* This makes the SECTION elements line up in a row that can be centered, similar to inline text .*/
margin: 0.5em; /* This is a short-hand for all four side margins. */
}


a:link, a:visited, a:active {
text-decoration: none;
color: #300;
background: #fff;
}
a:hover {
color: #f66;
background: #fff
}

p {
font-family: Georgia, serif;
font-size: 18px;
color: #300;
background: #fff;
}

p.date {text-align: center;}
p.description {text-align: left;}
p.button {text-align: right;}

</style>
</head>

<body>

<h1>Choose Your 2021 Iditarod Adventure From One of Our 8 Tours Below</h1>

<main>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

<section>
<a href="../totalrace/index.htm">
<h2>21 Day Ultimate Iditarod Experience</h2>
<img src="21day.jpg" width="330" height="221" alt=""></a>
<p class="date">March 02- March 22, 2021</p>
<p class="description">Four nights lodging on the Iditarod Trail, day trips to 6 remote checkpoints, seeing the Race Start and Finish</p>
<p class="button"><a href="../totalrace/index.htm"><img src="images/button.jpg" width="119" height="31" alt="Read More"></a></p>
</section>

</main>
</body>
</html>

[Christian J]

Here is the code for the page and on my 21in desktop monitor I get 3 rows with one section in each row instead of 1 row with 3 sections in it:

That sounds normal for a narrow browser window and/or content that's zoomed in. To increase the number of columns in narrow windows, I think you can remove the "width", "margin-left" and "margin-right" from the MAIN element (seems they're not really necessary after all). Without those properties I get two columns in 800px or wider, and three columns in about 1100px.

BTW to help MSIE11 center the content (though it's a rare browser these days) you can style the MAIN element as "display: block".