I used this code to implement this layout
<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3>{vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<div class="list-box">
<ul>
<vb:each from="articles" key="contentid" value="article">
<vb:if condition="$article['num'] == 1">
<li class="first-news">
<div class="cms_widget_post_bit widget_post_bit">
<div><a href="{vb:raw article.page_url}">
<img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}" width="390" height="220px" />
</a></div>
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"></a>
</div>
</li>
<vb:else />
<li class="other-news">
<div class="cms_widget_post_bit widget_post_bit">
<a href="{vb:raw article.page_url}">
<img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}&thumb=1&stc=1" width="100px" height="66px" /></a>
<div class="cms_widget_content widget_content">
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<a href="{vb:raw article.page_url}">{vb:raw article.title}</a>
</vb:if>
</div>
</div>
</li>
</vb:if>
</vb:each>
</ul>
<div class="clear"> </div>
</div>
</div>
</div>
</div>
and in additional CSS I added this code
.list-box li {
clear: left;
float: left;
overflow: hidden;
padding: 10px;
width: 50%;
}
.list-box li.other-news {
border-right: 3px solid #eaeaea;
}
.list-box li.first-news {
float: right;
padding: 15px;
}
*, *::before, *::after{
box-sizing: border-box;
}
every thing works great, but this part of code making truples in alot of site parts
*, *::before, *::after{
box-sizing: border-box;
}
for example, user drop down menu appear like a mixing rows, so do you have any suggestion to solve this problem??