Блог

Я пытаюсь добавить боковую панель слева и справа от моей области содержимого. Страницу, над которой я сейчас работаю, можно найти здесь. Вы заметите правую боковую панель под областью содержимого (в ней дважды встречается слово test). Я думаю, что проблема заключается в div class =»section-inner». Независимо от того, что я делаю, всегда применяется поле, которое, как я думаю, опускает боковую панель ниже содержимого. Ниже приведен CSS для этого раздела и боковой панели. Может кто-нибудь, пожалуйста, помочь мне, потому что у меня закончились идеи. Спасибо!

 .section-inner {
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}

.sidebar {
    width: 10%;
}

.sidebar .widget:first-child {
    border-top: none;
}

.sidebar .widget {
    padding: 30px;
}
  

вы можете использовать этот фрагмент css

 .section-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.section-inner .content {
  width: 90%;
  float: left;
}

.section-inner .sidebar {
  width: 10%;
  float: left;
}  

 <div class="section-inner">
  <div class="content">
    content
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>  

или с помощью flex

 .section-inner {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.section-inner .content {
  flex-basis: 90%;
}

.section-inner .sidebar {
  flex-basis: 10%;
}  

 <div class="section-inner">
  <div class="content">
    content
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>  

Вы body.single .content установили ширину 100%. Избавившись от этого или установив фиксированную ширину, освободится место для правой колонки.