Разделится, когда окна сделаны меньше

Question

Очень новичок в html и css, и у меня есть проблема, описанная в названии. Мой навигатор сжимает div с основным номером.

nav{ 
width:120px; 
float:left; 
margin:0px 5px 0px 5px; 

#main{ 
display:inline-block; 
padding: 1em; 
float:left; 
position:relative; 
min-width: 900px; 

Любая помощь приветствуется, приветствия.

редактировать:

Привет, ребята, может быть, я должен объяснить это лучше. На странице есть навигатор слева и справа от него. Когда ширина окна уменьшается, div справа направляется ниже навигатора, а не остается там, где он есть, и содержимое отображается на экране.

Answer 1

Вы прямо сказали, что ваш элемент ведет себя так. Когда вы устанавливаете min-width и ширину в пикселях, вы сообщаете своим элементам о том же размере независимо от того, что происходит. Удалить min-width и установить ширину в процентах, как 1% вместо 50px, как это:

nav { 
 
    width: 50%; 
 
    background: red; 
 
    height: 50px; 
 
    float:left; 
 
} 
 
#main { 
 
    display: inline-block; 
 
    height:50px; 
 
    float:left; 
 
    position: relative; 
 
    width: 50%; 
 
    background: black; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<nav></nav> 
 
<div id="main"></div>