Two divs on top of each other. Make them equal width? - html

Question

I have two <div> stacked on top of each other and centered. How to make them of equal width? If one of them has width: 96%; and when I give the other one the same width, it looks smaller than the first one.
Here's the HTML:
<div class="background-image">
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</header>
</div>
<div class="slider">
.....smth
</div>
and the 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;
}
So I need to make the .slider div the same width as the .container

Answer 1

If you include both divs inside another parent div, you can control the width for both at once by setting the style of that parent element. Then the padding around your 1st div will stretch out the parent div, and the 2nd div will fill the horizontal space of the parent. This version works:
HTML:
<div class="background-image">
<div class="mycolumn">
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</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/
This is closer to what you want, the background image should be placed as the body background instead of in that unclosed div. Let me know what updates you need to get it closer to how you want.
<div class="container">
<header>
<ul id="menu">
<li>Main</li>
<li>Apartments</li>
<li>Services</li>
<li>Blog</li>
<li>Contacts</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

Just set the width on both elements in the 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;
}
Feel free to uncomment the box-shadow in the .slider element to check the width is correct.