CSS Float с блоками

Question

У меня проблема, как я могу исправить блоки?

1. Блок Sidebar

   .sidebar { 
       display: block; 
       width: 250px; 
       float: left; 
       height: 100%; 
       background-color: #2b2b2b; 
       margin-right: 15px; 
   } 
   

2. Содержание блока

   .content-panel { 
       margin-right: 15px; 
       margin-top: 15px; 
   } 
   

Проблема: image

Как я могу исправить блок контента? Я должен убедиться, что устройство не принимает во внимание ширины боковой панели, в то время как его ширина составляет 100%, а боковая панель 250px

Answer 1

использования

.content-panel { 
    width: calc(100% - 280px); 
    margin-left: 265px; 
    margin-right: 15px; 
    margin-top: 15px; 
} 

что ширина вычитает ширину боковой панели и все поля от 100%, левая маржа перемещает его вправо.

Answer 2

Вы также можете использовать только margin-left, чтобы получить ширину блока контента 100% - 250px:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.sidebar { 
 
    background: lightblue; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 250px; 
 
} 
 

 
.content { 
 
    margin-left: 250px; 
 
    padding: 16px; 
 
    height: 100vh; 
 
    background: gold; 
 
}

<div class="sidebar"></div> 
 
<div class="content">Content</div>