Help pls so I have this problem…
Provide HTML and CSS to achieve the following effect. On screens that are more narrow, the
columns should stack vertically. Bear in mind that the text will be entered by the client via a
CMS, so there is no way for us to control the length of each column. State any assumptions…
So they’re asking for responsive…help pls don’t ignore if u have a solution…I’ve been racking my brain and maybe should walk away from the computer.
Parent with display:table;
–3x children with display:table-cell (and respective column content like in your picture)
END PARENT
Easy and simple 
. As for as making it responsive, throw in a media query for smaller screen sizes and remove the display:table/display:table-cell. They will then stack vertically.
What Ryan said 
Thanks PaulOB, you’re a star…thanks Ryan, I would have struggled with just your explanation.
I was running out the door so I tried giving you food for thought. Apologies.
Should have whipped up a codepen like he did.
@PaulOB Any reason you put position: relative on the .boxes container rather than on the .boxes li? Seems to work on the latter, and might be safer if there’s more content in the container other than the table.
I’m not Paul, but the answer is that table-cells are not spec’d to honor positioning. If they do, it is browser dependent.
Thanks Ron. I didn’t think pos: relative was supposed to work on CSS table cells, but tested it in Chrome and saw that it did, so wondered if it was only HTML tables that had this problem. Pity!
Paul said that most of the browsers today are respecting position:relative on table-cells but reminded us that it is not in the specs so we shouldn’t take it to the bank just yet (my words).
Paul’s way of handling this particular topic is quite clever. Since no horizontal repositioning of the paragraph is required, applying pos:rel to the parent display:table works nicely.
Yes as Ron said position relative on table-cells is undefined in the specs although there has been a move by the latest versions to allow you to position within cells but if you are just a couple of browser versions back you will find it doesn’t work.
I believe it will be become part of the specs so moving forward it should get better. Note though that even in all the latest browsers there are differences and some will let you move the cell with relative positioning (is that a good idea) while some won’t.
I put position:relative on the wrapper as the safest bet because even on the table element it varied between browsers. You could actually use that method as a fallback and put position:relative on the cell as well for those that understand it ( as long as horizontal co-ordinates are not used).
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
