- This topic is empty.
July 3, 2017 at 6:21 am #256416
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:July 3, 2017 at 6:38 am #256421
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
tablehere…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.July 3, 2017 at 11:21 am #256439
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. :)July 8, 2017 at 3:19 am #256647
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.July 8, 2017 at 11:58 am #256652
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
displayproperty as to how you want them to act.July 9, 2017 at 2:23 am #256656
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?July 9, 2017 at 9:42 am #256660
You can hide them if you want using media queries but not drop them unless you’re loading the content dynamically server-side.July 9, 2017 at 1:48 pm #256674
Alright, that’s how I will approach it then, if necessary. Thank you again.
- The forum ‘CSS’ is closed to new topics and replies.