Спрашивать о боковой панели

Question

пожалуйста, я хочу, чтобы переместить эти элементы на боковой панели в эту левую часть пространства, но я не могу думать, есть проблема с этим кодом

Screenshot

<div class='clear'/> 
<span class='widget-item-control'> 
<span class='item-control blog-admin'> 
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=4692355700320814336&widgetType;=HTML&widgetId;=HTML7&action;=editWidget&sectionId;=sidebar-left' onclick='return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML7&quot;));' target='configHTML7' title='تحرير'> 
<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> 
</a> 
</span> 

</span> 
<div class='clear'/> 

</div><div class='widget HTML' data-version='1' id='HTML4'> 

<h2 class='title'>تابعنى على الفيس بوك</h2> 

<div class='widget-content'> 

<iframe allowtransparency='true' frameborder='0' height='180' scrolling='no' src='https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F%D8%A5%D9%8A%D9%87%D8%A7%D8%A8-%D8%A8%D9%84%D9%88%D8%AC-%D9%84%D9%84%D8%AA%D9%82%D9%86%D9%8A%D8%A9-%D9%88%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-1481672011862823andtabs;.width=280.height=180.small_header=false.adapt_container_width=true.hide_cover=false.show_facepile=true.appId=1426898060671616' style='border:none;overflow:hidden' width='300'/> 

</div> 

Css Код

#sidebar-wrapper-left {margin:0 auto;} 

#sidebar-wrapper-right {margin:0 auto;} 

#sidebar-wrapper-center {margin:0 auto;} 
.clear { 
clear: both; 
} 
@media (max-width: 767px) { 
#footer-container { 
text-align: center; 
} 
#copyright { 
display: block !important; 
} 
.social-menu { 
float: none !important; 
} 
/*- - - - -Sidebar- - - - */ 
#sidebar-wrapper-left .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1); 
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px} 
#sidebar-wrapper-left .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);} 
#sidebar-wrapper-left .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px} 
#sidebar-wrapper-left h2{border-radius: 0;background:#254E71;color:#fff;clear: both; 
font-family:Lobster,ge_dinar_tworegular;font-size:18px;font-weight:normal;margin:0px;border: 5px solid;padding: 7px 65px 5px 0px;position:relative;transition:all .5s ease-out} 
#sidebar-wrapper-left h2:before{ content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#sidebar-wrapper-left h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;} 
#sidebar-wrapper-right .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1); 
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px} 
#sidebar-wrapper-right .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);} 
#sidebar-wrapper-right .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px} 
#sidebar-wrapper-right h2{border-radius: 0;background:#254E71;color:#fff;font-family:Lobster,ge_dinar_tworegular;font-size:17px;font-weight:normal;margin:0px;clear: both;padding: 7px 55px 5px 0px;position:relative;transition:all .5s ease-out; border-bottom: 1px solid #eee;border: 5px solid;} 
#sidebar-wrapper-right h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;} 
#sidebar-wrapper-right h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
= 
#PopularPosts1 h2:before{ content: '\f016'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#ContactForm1 h2:before{ content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#PageList1 h2:before{ content: '\f097'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#BlogArchive1 h2:before{ content: '\f0c7'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#Image1 h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px} 
#HTML3 h2:before { content: '\f059'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; } 
#FollowByEmail1 h2:before {content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px;} 
#Followers1 h2:before {content: '\f0c0'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; } 
#HTML2 h2:before {} 
.sidebar h2:before { content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; } 
#HTML1 h2:before { content: '\f0e6'; font-family: FontAwesome; font-style: normal; font-weight: normal; 
top: 0; bottom: 0;right: 0; position: absolute; padding: 0.4px 13px; 
background: #F74047; color: #fff; line-height: 37px;} 
#Label1 h2:before {content: '\f02c';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;} 
#BlogArchive h2:before {content: '\f187';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;} 
#BImage1:before {content: '\f005';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;} 
.quickedit{display:none;} 
html {overflow-x: hidden;} 

и есть проблема Жека «&» пожалуйста скажите мне, что я должен делать ...

и это веб-сайт, если и хотят, чтобы увидеть исходный код страницы http://shefoblog.blogspot.com.eg/

Answer 1

Класс .post-палец-OI-полотно имеет ширину, но не имеют поплавок, и поэтому ваш основной контейнер и боковая панель не бок о бок. Я бы предложил вам указать ширину и поплавок в контейнер вашего основного контента, который, кажется, является .date-сообщениями.

.date-posts { 
    float: right; 
    width: 821px; 
} 

должен сделать трюк, а затем вы можете удалить ширину с .post-thumb-oi-web.