مشكله العناصر المستقله

   <style>
  
.block .block-header + .block-content, .block .block-header, .action-bar-top, .forum-header, .posts-header, .forum-section, .posts-section, .action-bar-bottom, #block-birthdays, #block-online{
    width: 170%;
}

#index {
    margin-right: 322px;
    transition: none;
}

#sidebar {
    float: none;
}
.main-inner {
    float: left;
    width: 100%;
}
    </style>
  

<div id="{ID_LEFT}" class="main">
   <div class="main-head">
      <div class="page-title">
      </div>
   </div>
   <div class="main-content">
      <table cellspacing="0" class="table">
         <tbody class="statused">            
            <tr>              
               <!-- BEGIN giefmod_index1 -->
               {giefmod_index1.MODVAR}                                
               <!-- END giefmod_index1 -->
            </tr>
         </tbody>
      </table>
   </div>  
   <script type="text/javascript">
      //<![CDATA[
      $("#active_topics a, #viewed_topics a").after(function() {        
         return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'    
      });     //]]>
   </script>
</div>
<main id="index">
    <div class="main-inner">
        <!-- BEGIN message_admin_index -->
        <div class="block introduction">
            <!-- BEGIN message_admin_titre -->
            <div class="block-header">{message_admin_index.message_admin_titre.MES_TITRE}</div>
            <!-- END message_admin_titre -->

            <!-- BEGIN message_admin_txt -->
            <div class="block-content">{message_admin_index.message_admin_txt.MES_TXT}</div>
            <!-- END message_admin_txt -->
        </div>
        <!-- END message_admin_index -->


        {CHATBOX_TOP}
        {BOARD_INDEX}
        <!-- BEGIN disable_viewonline -->
        <div id="block-online" class="block-subtle">
            <i class="material-icons">assessment</i>
            <div>

                <!-- BEGIN switch_viewonline_link -->
                <span class="headline"><a href="{U_VIEWONLINE}" style="color: #263238;" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
                <!-- END switch_viewonline_link -->

                <!-- BEGIN switch_viewonline_nolink -->
                <span class="headline">{L_WHO_IS_ONLINE}</span>
                <!-- END switch_viewonline_nolink -->

                {TOTAL_USERS_ONLINE}<br /><br />
                {RECORD_USERS}<br />

                {LOGGED_IN_USER_LIST}<br />

                {L_ONLINE_USERS}
                {L_CONNECTED_MEMBERS} <br />

                {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

                <br />
                <em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>
            </div>
        </div>
        <!-- END disable_viewonline -->
        {CHATBOX_BOTTOM}
    </div>
</main>

<aside id="sidebar" class="sidebar-home">
    <!-- BEGIN giefmod_index1 -->
    {giefmod_index1.MODVAR}
    <!-- BEGIN saut -->
    <div style="height:{SPACE_ROW}px"></div>
    <!-- END saut -->
    <!-- END giefmod_index1 -->
</aside>

<script type="text/javascript">
    $(document).ready(function() {
        if ($('#sidebar').is(':empty')) {
            $('#index').css('margin', 0);
            $('#sidebar').hide();
        }
    });
</script>

<!-- BEGIN classical_row -->
<!-- <tr> -->
   <th class="forabg">
      <h2>المشاركات الجديدة</h2>
   </th>
<th class="forabg">
      <h2>المواضيع الاكثر نشاط</h2>
   </th>
  <th class="forabg">
      <h2>المواضيع الاكثر شعبية</h2>
   </th>
</tr>
<tr>
   <td class="double">
      <ul id="recent_topics">
         <!-- BEGIN recent_topic_row -->
         <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
         </li>
         <!-- END recent_topic_row -->
      </ul>
   </td>
<!-- </tr> -->
<!-- END classical_row -->

<td>
   <ul id="active_topics" class="half">
      <!-- BEGIN TOPIC -->
      <li>
         <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
      </li>
      <!-- END TOPIC -->
   </ul>
</td>

<!--<tr>-->
   <td>
      <ul id="viewed_topics" class="half">      
      <!-- BEGIN TOPIC -->      
         <li>
            <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
         </li>      
      <!-- END TOPIC -->
      </ul>
   </td>
</tr>

#left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 1px;
    vertical-align: top;
}
#left th{vertical-align:middle}
#left .double{border-left:0}
#left ul,#left th{padding:10px 10px 10px 30px;margin:0}

.forabg > h2 {
    color: #fff;
    font-size: 13px;
}

.main-content .table {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor #333 #333;
    border-image: none;
    border-radius: 5px;
    border-style: none dashed dashed;
    border-width: medium 1px 1px;
    width: 100%;
}
#left li {
    border-bottom: 1px dashed #ccc;
    counter-increment: Zzindex;
    height: 19px;
    line-height: 19px;
    list-style-type: none;
    padding-bottom: 20px;
    position: relative;
    width: 100%;
}

#left li::before {
    background: #e91e63 none repeat scroll 0 0;
    border-radius: 2px;
    color: #fff;
    content: counter(Zzindex, decimal);
    display: block;
    font-size: 11px;
    height: 17px;
    line-height: 16px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: 1px;
    width: 16px;
    z-index: 10;
}
#left li::after {
    background: #ebebeb none repeat scroll 0 0;
    content: " ";
    display: block;
    height: 6px;
    position: absolute;
    right: 8px;
    top: 6px;
    transform: rotate(45deg);
    width: 6px;
}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
#left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{
  color:#fff;
}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a {
    width: 94%;
}

#left .lastRight {
    left: auto;
    position: absolute;
    right: 20px;
    text-align: right;
    top: 0;}
#content-container #container {
    margin-right: 0 !important ;
}

#sidebar {
    display: none;
    float: left;
}

#index {
    margin-left: auto;
    transition: none;
}
th.forabg {
    background-color: #1E88E5;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 10%), 0 0 2px rgb(0 0 0 / 10%);
    color: #FFF;
    padding: 16px;
    position: relative;
    word-break: break-word;
}