I’m so close to finishing the wiki app that I can feel it: so close yet so far away! I ran into an issue with my original tabular structure where the Wikipedia extract row height was just a tiny bit smaller than its sibling’s title row height. Couldn’t figure out a solution on my own and the only advice I got was to not use the tabular format.
Well, I made some decent progress in creating a table-like format with
divs but am having issues with text overflow in the titles and also in the extract portion where the right border disappears.
- Applying the
overflowproperty to the titles portion (left side) causes all kinds of havoc with row alignment.
- Tried applying
display: tableto the container,
display: table-rowto the class block and
display: table-cellto the links and titles classes but it seems impossible to add any margin or padding afterwards. The text goes all the way to the right edge of the screen and completely bypasses any preset margins.
- Also tried some
white-spaceproperties which wrapped the title text but then that lead to mismatching row heights with its sibling.
Anyways, here’s my original with table elements: http://codepen.io/FatherWeebles/full/QGpZxb/. Got so close with this one!
Here’s the latest iteration of the div-table structure: https://codepen.io/FatherWeebles/full/ZLOMMV/. This is better than the above and is the one I need help with.
1) How would you go about stopping overflow in the titles section? For example, search "New York."
2) How would you go about fixing the lack of right borders in the extract section to the right?