https://www.w3schools.com/howto/tryi...olumns_unequal shows how to start what you are wanting to do. There are some additions to the process that are not listed as this example is how to control the CSS.
First, you will want to establish some parameters in the actual file. You can start by adding this code above the cat81_1_3List div
Code:
<div id="svdbWrapper">
<div class="svdbImage">
Place code for the image here.
</div>
<div id="svdbProdInfoWrapper">
<div class="svdbTitle">
Place the code for the Product's Title here.
</div>
<div class="svdbDesc">
Place the code for the Product's Description here.
</div>
</div>
<div id="svdbPriceAddWrapper">
<div class="svdbPrice">
Place the code for the Product's Price here.
</div>
<div class="svdbCartButton">
Place the code for the Product's ATC button here.
</div>
</div>
</div>
This will get the framework up for what you want to do without changing what you have.
Next, you can copy the corresponding code from your original and replace the red items above with your site's code. Copy the old rather than delete it in order to have a fall back.
When through, you should have two examples of the listing: the original and your new trial.
The svdbWrapper would be width:100%
The svdbimage, svdbProdInfoWrapper, and the svdbCartButton would be something like width:20%, width:50%, and width:30% respectively. This establishes your three-column layout and can easily be adjusted with the CSS later.
That should get you a little closer to what you are after.
Bookmarks