Как поместить div друг в друга?

Question

Я создаю простую консоль администратора, состоящую из 3 разделов. Один div (поиск пользователей) распространяется на всю ширину страницы, в то время как остальные оставшиеся div (privset, privrules) должны быть рядом друг с другом 50:50.

При загрузке страницы отображается только один div, а другой - в другом месте.

<style> 
body { 
padding:0%; 
margin:0%; 
overflow: hidden; 
} 

header { 
background-color:black; 
color:white; 
text-align:center; 
padding:5px; 
} 

#usersearch { 

border-bottom: medium solid; 
position: relative; 
width: 100%; 
height: 40vh; 
} 
#privset{ 

border-right: medium solid; 
position: relative; 
width: 50vw; 
height: 100vh; 

} 

#privrules{ 
float:right; 
position: relative; 
width: 50vw; 
height: 100vh; 


} 

footer { 
background-color:black; 
color:white; 
clear:both; 
text-align:center; 
padding:5px; 
position: absolute; 
bottom:0; 
left:0; 
right:0; 
} 
</style> 

HTML ниже

<div id="usersearch">Customer Information</div> 
<div id="privset">Priv set</div> 
<div id="privrules">Priv rules</div> 

Answer 1

границы CSS вы используете занимает пиксель или 2, поэтому установка каждый один к

width: 50vh; 

ширина было слишком много. либо установить их на 49vh, либо избавиться от границы.

также, если вы хотите 2 дивы плавали рядом друг с другом, установить

float: left; 

для обоих дивы.

рабочий пример here

Answer 2

Вы должны плавать #privset DIV и настроить для коробчатого проклейки.

Кроме того, использование 50vw может вызвать проблемы, так как у броузеров есть разные интуиции о том, включена ли любая полоса прокрутки в общую ширину. Вместо этого используйте 50% для поддержки кросс-браузера.

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#usersearch { 
 
    border-bottom: medium solid; 
 
    width: 100%; 
 
    height: 40vh; 
 
} 
 
#privset { 
 
    border-right: medium solid; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 100vh; 
 
    float: left; 
 
} 
 
#privrules { 
 
    float: right; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 100vh; 
 
}

<div id="usersearch">Customer Information</div> 
 
<div id="privset">Priv set</div> 
 
<div id="privrules">Priv rules</div>

Answer 3

Все элементы, сидящие бок о бок должны быть плавал. Кроме того, если вы используете границы и/или заполнение, необходимо установить box-sizing: border-box.

Смотрите этот рабочий пример: https://jsfiddle.net/lewster32/3zb7xgh2/