Responsive CSS Table: How to emulate columns?

I'm trying to move items around on a list of products for my categories.

My site is a zc155e and my template is a clone of Responsive Classic:
https://001mc.justmedical.biz/index.php?main_page=index&cPath=65

I mocked up what I'm trying to do in Photoshop:

I can't for the life of me figure out how to do that without table references (td, etc). The closest I can get is by adding this to my css:
.list-model,.list-price,.list-more{float:right;clear:both;width:15%;}

If somebody could school me, I'd really appreciate it!

Ok, HUGE progress!

By applying floats and widths, I was able to get things in the order I want (this is a dif staging site):
https://002mc.justmedical.biz/index.php?main_page=index&cPath=77

But now I have a problem with descriptions in the center column bumping right up to the stuff in the right column.

Here is a more clear illustration:
https://002mc.justmedical.biz/index.php?main_page=index&cPath=70&sort=3d&page=2

Please, dear Lord, somebody help me!

Edit: Btw, I intentionally sent price to the top, above model.

One comment (and I know it doesn't answer your question): You really don't want to be applying widths to page elements in a responsive design as the widths tend to mess up the displays on the smaller screens.

If you use FireFox (I'm sure there are similar commands in other browsers), press Ctrl+Shift+M to bring up a size-reduced view and see how your changes have affected the small-screen display.

lat9:

You really don't want to be applying widths to page elements in a responsive design as the widths tend to mess up the displays on the smaller screens.

For a while I was trying to address address issues at the same time by sticking that stuff inside @media xxx {}, but then even those fixes were disappearing. :(

For now I'm just trying to fix the desktop version. When I find my solution, I'll work on only applying it to larger screens.

Thanks for looking in. :)

You could use the CSS display-like-table (https://www.w3schools.com/cssref/pr_class_display.asp) styling to apply a display: table; rule to the outer div, then display: table-row; and display: table-cell; to style the rows (like <tr>) and columns (like <td>).

AWESOME IDEA! Thank you so much!

I added some table elements and seem to have made progress...
https://002mc.justmedical.biz/index.php?main_page=index&cPath=70

But I'm clearly doing it wrong. When I add margin above price, it bumps my model out of place. :(

Your after a grid pattern, but your not using containers.. Tables was a easy way of creating grids without allot of work. Tables can be made responsive with some work. I use grids for my shopping cart that when the screen change to a smaller size well stack using @media .. this is a good site to start with responsivegridsystem(DOT)com

google for responsive grids and you will find many others...

I'm not a fine of rows and use the grid layout myself.. you can find it in the download section..

That sounds pretty cool.

I just looked it up:
https://www.zen-cart.com/downloads.php?do=file&id=3

Unfortunately, I'm not up for an even deeper challenge.

davewest:

Your after a grid pattern, but your not using containers.. Tables was a easy way of creating grids without allot of work. Tables can be made responsive with some work. I use grids for my shopping cart that when the screen change to a smaller size well stack using @media .. this is a good site to start with responsivegridsystem(DOT)com

google for responsive grids and you will find many others...

I'm not a fine of rows and use the grid layout myself.. you can find it in the download section..
Thanks for the reference, @davewest; I've got that bookmarked!