Can somebody help me with optimizing this code? I'd like to have some control about placement. Masonry doesn't do the job in that way.

What I have done now is to create some sets of columns. For different screen width one of the column sets will be active. Big screens have 3 columns middle screens 2 and small screens one one column. The columns are filled with several divs with the same width but different heights.

In this case the htlml loads double content, which is turned off by css.

Can somebody help me to find a way to avoid double content? Thanks in advance!

At the moment of writing it is in use by [www.pcsupportaanhuis.nl][1]

 


    #l_wrapper_topic_left {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    clear: both;
    display: inline;
    }
        
   #l_wrapper_topic_middle {
    margin: 0;
    margin-right: 2%;
    padding: 0;
    width: 32%;
    float:left;
    overflow: auto;
    display: inline;
   }
        
   #l_wrapper_topic_right {
    margin: 0;
    padding: 0;
    width: 32%;
    float: right;
    overflow: auto;
    display: inline;
  }
        
   #m_wrapper_topic_left {
    display: none;
  }
            
  #m_wrapper_topic_right {
    display: none;
  }
            
   #s_wrapper_topic {
    display: none;
  }
   
   .incolumn {
    margin-bottom: 4%;
  }

  @media only screen and (max-height: 480px) 
    and (max-width: 531px) and (orientation: landscape) {
    #m_wrapper_topic_left {
        margin: 0% 2% 0% 0%;
        padding: 0;
        width: 49%;
        float:left;
        overflow: auto;
        clear: both;
        display: inline;
      }     
        
         #m_wrapper_topic_right {
          margin: 0;
         padding: 0;
        width: 49%;
        float: right;
        overflow: auto;
        display: inline;
       }
        
       #l_wrapper_topic_left {
         display: none;
        }
            
       #l_wrapper_topic_middle {
        display: none;
       }
            
       #l_wrapper_topic_right {
        display: none;
       }
            
      .incolumn {
        margin-bottom: 4%;
      }
   }




    
     <div id="l_wrapper_topic_left">        
        <div class="cblock incolumn" >
        <?php include('topics/t1.php'); ?> 
      </div>
    
      <div class="cblock incolumn" >
           <?php include('topics/t4.php'); ?> 
       </div>
    </div>

   <div id="l_wrapper_topic_middle">
        <div class="cblock incolumn" >
          <?php include('topics/t2.php'); ?> 
         </div>
   </div>

    <div id="l_wrapper_topic_right">
        <div class="cblock incolumn" > 
           <?php include('topics/t3.php'); ?> 
         </div>
    </div>

      <div id="m_wrapper_topic_left">
           <div class="cblock incolumn" >
            <?php include('topics/t1.php'); ?> 
         </div>
       <div class="cblock incolumn" >
           <?php include('topics/t3.php'); ?> 
        </div>
         <div class="cblock incolumn" >
         <?php include('topics/t4.php'); ?> 
       </div>       
   </div>

    <div id="m_wrapper_topic_right">
         <div class="cblock incolumn" >
           <?php include('topics/t2.php'); ?> 
        </div>      
  </div>

  <div id="s_wrapper_topic">
      <div class="cblock incolumn" >
          <?php include('topics/t1.php'); ?> 
      </div>
       <div class="cblock incolumn" >
          <?php include('topics/t2.php'); ?> 
      </div>        
      <div class="cblock incolumn" >
          <?php include('topics/t3.php'); ?> 
       </div>       
      <div class="cblock incolumn" >
          <?php include('topics/t4.php'); ?> 
      </div>                
 </div>