Два divs друг на друга. Сделать их равной шириной?

Question

У меня есть два <div>, уложенные друг на друга и центрированные. Как сделать их равной ширины? Если один из них имеет width: 96%;, и когда я даю другому одну ширину, он выглядит меньше, чем первый.

Вот HTML:

<div class="background-image"> 
<div class="container"> 
    <header> 
      <ul id="menu"> 
       <li><a href="index.html">Main</a></li> 
       <li><a href="#">Apartments</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contacts</a></li> 
      </ul> 
    </header> 
</div> 

<div class="slider"> 
    .....smth 
</div> 

и CSS:

body{position:absolute; ....}/*needed this because of the body background image*/ 

.container{ 
width: 96%; 
height: 350px; 
background: #fff; 
margin-top: 50px; 
box-shadow: 0 0 20px #777; 
padding: 60px; 
} 

.slider { 
position: relative; 
max-height: 500px; 
margin: 0 auto; 
} 

Так что мне нужно сделать .slider Див ту же ширину, как .container

Answer 1

Если вы включаете оба div внутри другого родительского div, вы можете управлять шириной для обоих сразу, установив стиль этого родительского элемента. Затем прокладка вокруг вашего первого div будет растягивать родительский div, а второй div заполнит горизонтальное пространство родителя. Эта версия работает:

HTML:

<div class="background-image"> 
    <div class="mycolumn"> 
     <div class="container"> 
      <header> 
        <ul id="menu"> 
         <li><a href="index.html">Main</a></li> 
         <li><a href="#">Apartments</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">Blog</a></li> 
         <li><a href="#">Contacts</a></li> 
        </ul> 
      </header> 
     </div> 

     <div class="slider"> 
      .....smth 
     </div> 
    </div> 
</div> 

CSS:

body{position:absolute; ....} 
.mycolumn { 
width: 96%; 
margin-top: 50px; 
} 
.container{ 
height: 350px; 
background: #fff; 
padding: 60px; 
box-shadow: 0 0 20px #777; 
} 
.slider { 
position: relative; 
max-height: 500px; 
margin: 0 auto; 
} 

Answer 2

https://jsfiddle.net/jq9qrfrw/1/ Это ближе к тому, что вы хотите, backgrou nd изображение должно быть помещено как фон тела, а не в этот незакрытый div. Дайте мне знать, какие обновления вам нужно, чтобы приблизиться к тому, как вы хотите.

<div class="container"> 
    <header> 
    <ul id="menu"> 
     <li><a href="index.html">Main</a></li> 
     <li><a href="#">Apartments</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Contacts</a></li> 
    </ul> 
    </header> 
</div> 

<div class="slider"> 
    .....smth 
</div> 

CSS:

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

.container { 
    padding: 0; 
    overflow: hidden; 
    width: 96%; 
    height: 350px; 
    background: #fff; 
    margin: 50px auto 0 auto; 
    box-shadow: 0 0 20px #777; 
} 

.slider { 
    padding: 0; 
    width: 96%; 
    position: relative; 
    max-height: 500px; 
    margin: 0 auto; 
    background-color: red; 
} 

Answer 3

Просто установите ширину на обоих элементов в CSS

body{position:absolute; ....}/*needed this because of the body background image*/ 

.container{ 
width: 96px; 
height: 350px; 
background: #fff; 
margin-top: 50px; 
box-shadow: 0 0 20px #777; 
padding: 60px; 
} 

.slider { 
width: 96px; 
position: absolute; 
max-height: 500px; 
margin: 0 auto; 
width: 100%; 
//box-shadow: 0 0 20px #777; 
} 

Вы можете раскомментировать бокс-тень в элементе .slider проверить ширину верно.