Other The javascript horrortrip

[Jose]

Tables should not be used for layout because tables are structure of the document and layout should be confined to CSS. You can't easily, if at all, move content from one data element, such as a <td> which is why people used to "slice" images back in the day. The guy who first thought of using tables for layout wrote an article, "The web is ruined and I ruined it!", lamenting his method.

Having worked on a tables-inside-tables horrorshow, I beg you please, please listen to Dr. Fine. It was tables all the way down, all used for layout and all empty except for one cell. I think. I'd have to find the notes and diagrams me and my boss came up with trying to debug that horrible thing.

As a general comment on this thread, sometimes the only way to win is not to play at all.

https://hilton.org.uk/blog/javascript-frameworks-days.png

 

[kpedersen]

In this case, the "expanding div" regions is not clickable.

Ah, that div can go in a <a> (since HTML5 this is valid):

<a href="#">
  <div style="background: red; height: 200px; display: flex; flex-direction: column">
    <div style="flex-grow: 1"></div>
    <div>
      Go Back
    </div>
    <div style="flex-grow: 1"></div>
  </div>
</a>

Make Entire Div Clickable | CSS-Tricks

Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic

css-tricks.com

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[Hakaba]

Depending how you get the height of the a element (as you want a box), you have different solutions :

1) Same height depending of the em :

a{
display: inline-block;
width: 100px;
height: 3em;
border: 1px solid blue;
background-color: yellow;
padding: 1em auto;
}

2) Custom height (work with the display: inline-block).

<a href=""><div class="acontent">
    blah blah
    </div> </a>

a {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: yellow;
    line-height: 100px; /* Here is the magic... */
}

.acontent {
    height: 100%;
    vertical-align: middle;
    display: block;
}

That is ok since HTML5.

 

[PMc]

Ah, that div can go in a <a> (since HTML5 this is valid):

<a href="#">
  <div style="background: red; height: 200px; display: flex; flex-direction: column">
    <div style="flex-grow: 1"></div>
    <div>
      Go Back
    </div>
    <div style="flex-grow: 1"></div>
  </div>
</a>

Ah. Yes, that one might indeed work. Hadn't heard yet about that possibility.