weredy

Через псевдоэлемент и transform:
JSFiddle

Пропиши type и data атрибуты:

<object type="application/x-shockwave-flash" data="http://visualhotels.com/files/01/010167/Panoramas/7637_f.swf" id="flag" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="600" height="451">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="http://visualhotels.com/files/01/010167/Panoramas/7637_f.swf" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="salign" value="rt" />
    <param name="wmode" value="transparent" />
  </object>

Можно :before и :after наклонить трансформацией.

Попробуй использовать библиотеку tap: https://github.com/pukhalski/tap или что-то подобное. Возможно это связано с кучей событий при тапе и стандартной задержкой на тач устройствах в 300мс.

Попробуй Grid960

subtext{
  display: none;
}

А вообще будет гораздо проще тебе помочь если ты выложишь фрагмент кода этого участка.

Сам с такой проблемой сталкиваюсь, сделал вывод что победить её можно только опытом. Просто верстай, всё придёт.

Кстати по поводу (onclick="foo()") в элементе. Особенно если ты их генериш динамически, может случаться такое что после удаления из dom этого элемента его обработчик продолжает существовать: Продолжает ли листенер onclick (Который прям в тэге) висеть в памяти после удаление объекта?

Если ты хочешь чтобы это был цельный блок - то, насколько мне известно - никак. Можно вместе дырки использовать картинку, тогда строчные элементы будут её обтекать.

Viewport units?

Я не совсем понял вопрос, на картинке они по центру, в коде кусок из шаблона какойто цмс, без ксса даже. Опиши подробнее что ты хочешь.

Сделал так: https://jsfiddle.net/c3cLwaay/

Кстати так как сделал Антон Нагаец делает фреймфорк neat, так что у него проверенное решение. Да и сточки зрения адаптивности правильнее, меньше блоки - меньше маргины.

Но на всякий случай моё решение через статичные маргины:

<div class="wrapper">
    <div class="column-25">
        <h1>Заголовок 1</h1>
        <p>
        </p>
      </div>
    <div class="column-50">
        <h1>Заголовок 2</h1>
        <p>
        </p>
      </div>
    <div class="column-25">
                               <h1>Заголовок 3</h1>
              <p></p>
                       </div>
</div>

h1 {
      text-align: center;
      color: #FFF;
      margin: 0;
    }
    .wrapper{
      padding: 10px;
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
    }

    .column-25,.column-50 {
      background: #f1c40f;
      height: 320px;
      border: 10px #34495e solid;
      margin-right: -10px;
      box-sizing: border-box;
    }
    
        
    .column-25 {
      width: 25%;
      float: left;
    }
    
    .column-50 {
      width: 50%;
      float:  left;
    }
    
    .column-25:last-child {
      margin-right: 0px;
    }