Sidebar продолжает исчезать при добавлении контента

Question

медведь со мной, как я довольно новыми для HTML,

У меня уже есть следующий HTML:

<div class="middle"> 

    <div class="container"> 
     <main class="content"> 
     </main><!-- .content --> 
    </div><!-- .container--> 
    <aside class="left-sidebar"> 
     <ul class="nav"> 
      <li><a href="index.html">HOME</a></li> 
      <li><a href="over.html">OVER</a></li> 
      <li><a href="reizen.html">REIZEN</a></li> 
      <li><a href="afbeeldingen.html">AFBEELDINGEN</a></li> 
      <li><a href="boek_nu.html">BOEK NU</a></li> 
      <li><a href="forum.html">FORUM</a></li> 
     </ul> 
    </aside><!-- .left-sidebar --> 
    </div><!-- .middle--> 
</div><!-- .wrapper --> 

CSS:

.wrapper { 
    width: 100%; 
    margin: 0 auto; 
} 
.header { 
    height: 60px; 
    background: black; 
    opacity: 0.7; 
    margin-top: 1%; 
    position: relative; 
    color: white; 
    font: helvetica 
} 
.container { 
    position: relative; 
    width: 100%; 
    margin-top: 10%; 
} 
.content { 
    padding: 0 0 0 270px; 
} 
/* Left Sidebar -----------------------------------------------------------------------------*/ 
.left-sidebar { 
    position: relative; 
    float: left; 
    width: 10%; 
    height; 
    150%; 
    margin-left: 7%; 
    margin-top: 4%; 
    opacity: 0.7; 
    font-family:"Montserrat", sans-serif; 
    font-size: 20px; 
    color: Red; 
} 

Всякий раз, когда я попробуйте добавить большую картинку в область «контент», вся боковая панель исчезает. У меня есть код в CSS, который правильно позиционирует боковую панель, и я уверен, что это проблема.

Мой вопрос к вам: что было бы правильным кодом CSS, чтобы боковая панель оставалась где-то слева, а область содержимого справа?

Answer 1

У вас много чего работает против вас. Установка .container на что-то вроде 90% не будет работать, потому что она не плавает. Элемент уровня блока с заданной шириной будет по-прежнему занимать всю ширину, а оставшееся пространство заполняется краем. Плавающая удаляет эту маржу, но представляет другие проблемы, о которых вам нужно знать.

Если вы плаваете .container справа и устанавливаете его ширину до 83%, вы достигнете того, что ищете. Почему 83%? Ширина .left-sidebar составляет 10% плюс запас 7% = 17% общей ширины боковой панели. Даже после этой корректировки я опасаюсь, что это не может быть pefect, как такие, как 10% верхний край на .container, а 270px левого дополнения на .content и верхний край 4% на .left-sidebar могут быть не такими, какие вы планировали.

.wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background: black; 
 
    opacity: 0.7; 
 
    margin-top: 1%; 
 
    position: relative; 
 
    color: white; 
 
    font: helvetica 
 
} 
 
.container { 
 
    float: right; 
 
    width: 83%; 
 
    margin-top: 10%; 
 
} 
 
.content { 
 
    padding: 0 0 0 270px; 
 
} 
 
.left-sidebar { 
 
    position: relative; 
 
    float: left; 
 
    width: 10%; 
 
    height; 
 
    150%; 
 
    margin-left: 7%; 
 
    margin-top: 4%; 
 
    opacity: 0.7; 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 20px; 
 
    color: Red; 
 
}

<div class="middle"> 
 
    <div class="container"> 
 
     <main class="content"> 
 
      <img src="http://lorempixel.com/400/400/city"> 
 
     </main><!-- .content --> 
 
    </div><!-- .container--> 
 
    <aside class="left-sidebar"> 
 
     <ul class="nav"> 
 
      <li><a href="index.html">HOME</a></li> 
 
      <li><a href="over.html">OVER</a></li> 
 
      <li><a href="reizen.html">REIZEN</a></li> 
 
      <li><a href="afbeeldingen.html">AFBEELDINGEN</a></li> 
 
      <li><a href="boek_nu.html">BOEK NU</a></li> 
 
      <li><a href="forum.html">FORUM</a></li> 
 
     </ul> 
 
    </aside><!-- .left-sidebar --> 
 
</div><!-- .middle-->

Позвольте мне воспользоваться этой возможностью, чтобы представить CSS свойство box-sizing набор со значением border-box, который позволяет использовать другую модель коробки.

.example { 
    width: 100px; 
    padding: 0 10px; 
} 

Обычно общая ширина будет 120px = 10px + 100px + 10px.

.example { 
    box-sizing: border-box; 
    width: 100px; 
    padding: 0 10px; 
} 

С box-sizing: border-box общая ширина будет 100px = 10px + 90px + 10px, как указано с шириной собственности. Если вы говорите что-то должно быть XXX ширина будет и эта сумма включает в себя обивку, поля и т.д.

Should you use box-sizing: border-box?

Answer 2

Реальная проблема заключается в разработке макета HTML не CSS Вы должны положить левую панель (навигация), прежде чем содержание что-то вроде этого: заголовок, Navigator, содержание, Footer

изменения ширины контейнер до 90% или менее (маржа слева займет 1%) в CSS, так как навигатор составляет 10% . Они должны составлять до 100%