I've moved to CSS from Tables, and having a couple of issues with lining things up

Question

Backstory

So a couple of years ago for the younger members of my family, I hosted a small website on my NAS that allowed them to create a Christmas wishlist that other family members could then go on and choose what they wanted to buy, and mark the item as theirs to prevent double or erroneous purchases. It worked well, and was greatly received, so I am trying to update it's layout to be responsive as some people want to access it from mobile devices. It was basic code, not very secure and used tables.

So now I am trying to update the website to be more modern and responsive, as well as a little bit secure (I've never had any problems with people messing with the website, but it's a potential threat so I'd rather nip it in the bud before it starts.)

Question

I SELECT all rows from a MySQL database and display them in a list. I used to use tables to keep it all laid out and looking nice, but I'm trying to move to CSS, so that the website can be more efficient and responsive.

I have the basic layout sorted but I have a few snagging issues. Here is the fiddle of how it looks now:

https://jsfiddle.net/0q10uhw1/11/

What I need it a layout similar to this, which is how it used to look when there was tables being used for the layout:

Each row returned was put into a table like that, one under another, list style. But now I'm getting rid of the tables in place of CSS, I'm struggling a tad.

The main issues I'm having at the moment are:

• The Item Name isn't being constrained and is overflowing the container div. I need it to preferably scale, overflow with an ellipsis or if need be, word wrap to a new line. As you can see in the fiddle, it's going off the edge of the screen.
• Possibly due to the above issue, the Price div isn't staying on the same line as the Name div, and I need the both of them on the same line, I have tried wrapping them both in a container div and setting that to display:inline-flex, which does put the two side by side, but then I can't force the Name div to the left with a left text-align, and the overflowing still happens, and the price field seems to align vertically to the top right, but I want them aligned the same vertically.
• The comments div will sometimes wrap under the image and rating fields, which is evident in the field, kind of, as the comments div is showing under the rest of the fields. This isn't too much of a problem, as when the webpage is scaled down smaller, say on a mobile phone, I want the layout to change so that comments are hidden until a button is clicked to show them. But when the screen is big enough, I want the image and rating div to take up the left hand side, as shown in the image above, so the comments div should be the width of the category and website divs combined.

Answer 1

Issue #1

.container has white-space:nowrap; so the content won't wrap when it reaches the edge. Set it to wrap or pre-wrap.

.container {
white-space: wrap;}

Issue #2

.name needs to be float:left, so it will take up the space to the immediate right of the image and allow the price to float to the space on the right.

So it also needs to have a width assigned to it to allow the other elements space. Try something like 50% and then adjust.

.name {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
float:left;
width:55%;}

Issue #3

This can be solved by using your clear divs with clear:both and using them as dividers outside the content containing divs, not inside like you have used.

This should get you back on track. https://jsfiddle.net/0q10uhw1/15/