title: make <div> as a link and save the sizes of the containers
body: <p>So now I have this structure, and I'm happy with it. <a href="https://i.stack.imgur.com/mvVcU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mvVcU.png" alt="enter image description here"></a> The problem is that this containers should be active as a links. Until now the links are working only if you will press on the text. I know that I can make them active if I will make the structure something like <code>&lt;a&gt;&lt;div...&gt;&lt;/div&gt;&lt;/a&gt;</code>, but then the position of the containers becoming different.</p>
  
  <p>Now I'm using the following code </p>
  
  <p>CSS:</p>
  
  <pre><code>.containerfourt{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  
  
  
  
  
  .titlewhitebackground{
    width: 70%;
    height: auto;
    padding: 20px;
    background-color: white;
    display: inline-block!important;
    background-color: white;
   background-image: url("/expotory/wp-content/uploads/2016/06/bar_003soft.png");
  }
  
  
  
  .newnews{
    width: 30%;
    height: auto;
    padding: 20px;
    background-color: white;
    display: inline-block!important;
    background-color: white;
    color: white;
  
  }
  
  
  .navigationfourtfirst{
    width: 48.5%;
    height: auto;
    padding: 20px;
    background-color: #048fc2;
    display: inline-block!important;
    margin-right: 30px;
    margin-top: 30px;
    color: white;
   background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
    background-repeat: no-repeat;
    background-position: 75% 95%, 85% 95%, 95% 95%;
    background-size: 30px 30px;
  
  
  }
  
  
  .navigationfourtsecond{
    width: 23%;
    height: auto;
    padding: 20px;
    background-color: #174a62;
    display: inline-block!important;
    margin-right: 30px;
    margin-top: 30px;
    color: white;
    background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
    background-repeat: no-repeat;
    background-position: 50% 95%, 70% 95%, 90% 95%;
    background-size: 30px 30px;
  }
  
  .navigationfourtthird{
    width: 23%;
    height: auto;
    padding: 20px;
    background-color: #174a62;
    display: inline-block!important;
    margin-top: 30px;
    color: white;
    background-image: url("/expotory/wp-content/uploads/2016/06/regioni.svg"), url("/expotory/wp-content/uploads/2016/06/logistika.svg"), url("/expotory/wp-content/uploads/2016/06/ploshadki.svg");
    background-repeat: no-repeat;
    background-position: 50% 95%, 70% 95%, 90% 95%;
    background-size: 30px 30px;
  }
  
  .navigationfourtfourth{
    float: left;
    width: 100%;
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
    min-height: 283px;
    margin-bottom: 15px;
    margin-top: 30px;
    height: auto;
    height: auto;
    padding: 20px;
    background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00.png);
    color: white;
  }
  
  
  .navigationfourtfirst:hover,
  .navigationfourtsecond:hover,
  .navigationfourtthird:hover{
      background-color: #0167a5;
  }
  
  .navigationfourtfourth:hover{
      background-image: url(/expotory/wp-content/uploads/2016/06/expotory_b_00001.png);
  }
  
  
  .navigationfourtfirst h3,
  .navigationfourtsecond h3,
  .navigationfourtthird h3,
  .navigationfourtfourth h3
  {
    color: white;
  }
  
  .navigationfourtfirst a,
  .navigationfourtsecond a,
  .navigationfourtthird a,
  .navigationfourtfourth a
  {
    color: white;
  }
  
  .navigationfourtfirst a:hover,
  .navigationfourtsecond a:hover,
  .navigationfourtthird a:hover,
  .navigationfourtfourth a:hover
  {
    color: white!important;
  }
  </code></pre>
  
  <p>and HTML </p>
  
  <pre><code>&lt;div class="containerfourt"&gt;
  &lt;div class="titlewhitebackground"&gt;
  &lt;h1&gt;Территория&lt;/h1&gt;
  &lt;h3&gt;Путеводитель по выставочному миру: города и площадки, обзоры, аналитика, интересные факты и навигация, — где проводить выставки, где выставлять свой продукт, где посещать?
  &lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="newnews"&gt;&lt;section id="recent-posts-3" class="widget widget_recent_entries"&gt;
  &lt;h3 class="widget-title"&gt;&lt;u&gt;свежие записи&lt;/u&gt;&lt;/h3&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://cu33132.tmweb.ru/expotory/2016/06/07/hashtag-united/"&gt;&lt;u&gt;Хэштег объединяет&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://cu33132.tmweb.ru/expotory/2016/06/02/advices/"&gt;&lt;u&gt;25,5 универсальных советов практикующим маркетологам&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://cu33132.tmweb.ru/expotory/2016/06/02/agrovideo/"&gt;&lt;u&gt;АГРОСАЛОН запустил вирусный сериал&lt;/u&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/section&gt;&lt;/div&gt;
  
  &lt;div class="navigationfourtfirst"&gt;
  &lt;a href="http://cu33132.tmweb.ru/expotory/category/regions/"&gt;
  &lt;h3&gt;РЕГИОНЫ&lt;/h3&gt;
  Аналитика по регионам России: слабые и сильные стороны территорий, профильные отрасли, активность участников выставочного бизнеса.
  &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="navigationfourtsecond"&gt;
  &lt;a href="http://cu33132.tmweb.ru/expotory/category/platforms/"&gt;
  &lt;h3&gt;ПЛОЩАДКИ&lt;/h3&gt;
  Всё о выставочных площадках и пространствах: история легендарных выставочных залов, технические характеристики, маркетинговые возможности.
  &lt;br&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div class="navigationfourtthird"&gt;
  &lt;a href="http://cu33132.tmweb.ru/expotory/category/logistics/"&gt;
  &lt;h3&gt;ЛОГИСТИКА&lt;/h3&gt;
  Справочник для экспонентов и посетителей: как добраться на выставку, как доставить оборудование и продукцию, где разместиться.
  &lt;/a&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="navigationfourtfourth"&gt;
  &lt;a href="http://cu33132.tmweb.ru/expotory/category/territory-in-numbers/"&gt;
  &lt;h3&gt;ТЕРРИТОРИЯ В ЦИФРАХ&lt;/h3&gt;
  Инфографика — аналитика по регионам, выставочным площадкам России и мира и логистике выставок в удобном графическом формате.
  &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>the link to the website is <a href="http://cu33132.tmweb.ru/expotory/territory/" rel="nofollow noreferrer">http://cu33132.tmweb.ru/expotory/territory/</a></p>
  
  <p>Hope that you can help me! 
  Thank you in advance !</p>