Laying out a two-column index with — flexbox?

[Linda_A]

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:

https://codepen.io/Linda_A/pen/eRrZNj

[Paulie_D]

Unfortunately your Codepen isn’t actually showing us the problem.

I assume you are referring to the center column in the linked page though..

What is not clear is “What do you want this to look like… when there is an image and when there isn’t.”

What alignment did you have in mind?.

Will all images be the same size?

Quite honestly, there’s nothing wrong with using an actual table here…that’s what you have after all…a table of episodes.

If you’re violently opposed to actual tables, then CSS Table properties could be using as an alternative.

[Linda_A]

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’ll look at the CSS tables, thank you. :)

[Linda_A]

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.

[Paulie_D]

Here.

One with an actual table…the second is with CSS Tables…almost no difference as you can see.

The structure is essentially the same except you use divs instead of table/tr/td…you just declare their display property as to how you want them to act.

https://codepen.io/Paulie-D/pen/WOaoYw

[Linda_A]

Thank you! That gives me a great base to work from. With this sort of layout, is it possible to drop the text field once I get below a certain size, to have it just be the cell with the image?

[Paulie_D]

You can hide them if you want using media queries but not drop them unless you’re loading the content dynamically server-side.

[Linda_A]

Alright, that’s how I will approach it then, if necessary. Thank you again.

[Author]

Posts