Search code examples
htmlcsshyperlinkword-break

Why is this HTML table stretching outside the div?

I'm going to try to make my problem as clear as possible, and I will appreciate any help, because I'm out of places to look for answers.

I have 3 tables on this website: http://3577wf14.clindgrencv.com. I have combed over all three tables' format (HTML/CSS, ids, classes, open elements, etc.) and they are identical. (Obviously, not the content, but the code.) Yet, the first table does not conform to the section > div > table relationship like the subsequent 2 do. In other words, the 2nd and 3rd table conform to the div as the window width decreases, but the 1st table does not.

Here are some screen shots of the problem. Note the computed width values:

Problem table #1

enter image description here

Working tables

enter image description here

Any hints toward an answer are much appreciated. Again, I've done the best I could cross-comparing it with the other 2 tables that are working just fine.

Sincerely,

Stuck

Solution

  • The issue appears to be due to this link:

    http://www.ted.com/talks/kevin_slavin_how_algorithms_shape_our_world?language=en

    Since the URL is in a table it's pushing at the boundaries of the table and extending the width (depending on your monitor resolution and browser window size). This is one of the problems with displaying URLs in full (though honestly I would have expected it to break at the slash).

    You can avoid problems like this with overly long URLs with the following styling: a { word-break: break-all; }. According to the Mozilla docs word-break is fairly well supported property for being part of CSS3.