What is the best approach for laying out a two-column index where you may have an image to the left (but sometimes there isn’t one) and the text can be of varying lengths. So far, I have used standard floating and it doesn’t handle larger monitors or the missing images very well. Is flexbox an approach, for example?
The current page is viewable at http://www.westeros.org/GoT/Episodes/ — I also added the current code into a codepen, but I think it probably needs a pretty significant retooling since it isn’t so much that this code is incorrect but rather not sufficient for the task:
Sorry, it seemed like it would be confusing to include the whole page around it, so I left it to the tags being used for the actual index. But yes, its the center column.
You are right that it is a table, I just haven’t used one in ages so I was concerned about its responsiveness. The ideal scenario is that the space reserved for the image (all images will be the same size) should remain reserved even when there’s no image, so that the text is pushed over that distance to the right.
I’ve been poking at this during the week but not found any good examples to work from. If you have any resources to suggest for css tables, that would be much appreciated. I am particularly uncertain about how it would work in terms of responsiveness, as the result needs to work on both desktop and mobile.