div disappear when display:none is set for nested ul - css

Question

Here is my example webpage:
div.menu_po_lewej {
background: url('http://kielich.lubin.pl/wp-content/themes/kielich/img/user.png') no-repeat;
float: left;
width: 195px;
padding: 0;
margin: 0;
}
div.srodek {
float: left;
padding-left: 15px;
width: 805px;
padding-top: 75px;
}
div.prawa {
float: right;
width: -webkit-calc(100% - 1050px);
padding: 0;
margin: 80px 0 0 0;
}
div.menu-menu_lewe-container {} #menu-menu_lewe {
/* display: none; */
}
<div class="menu_po_lewej">
<div class="menu-menu_lewe-container">
<ul id="menu-menu_lewe" class="menu">
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-40">
Strona główna
</li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
O stowarzyszeniu
</li>
<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
Sztuczna ściana
</li>
</ul>
</div>
</div>
<div class="srodek">
<h1 class="entry-title">II MEMORIAŁ IWONY BUCZEK 26.09.2015</h1>
<p>26 września 2015 roku Stowarzyszenie Miłośników Gór w Lubinie … Continue reading<span class="screen-reader-text"> “II MEMORIAŁ IWONY BUCZEK 26.09.2015”</span>
</p>
<br />
</div>
<div class="prawa">test</div>
Now, why when I uncomment display:none in #menu-menu_lewe whole div.menu_po_lewej isn't displayed? Even when I put display:block inside menu_po_lewej it still disappear.

Answer 1

If you have display:none on the menu-menu_lewe, there is nothing left inside the upper divs, which means they collapse.
If what you want is that the background image on the menu is still displayd even when the menu items are hidden, then you can use a min-height value to force it to a certain size at all times. Here is a fiddle example: https://jsfiddle.net/zqfefy2c/
div.menu_po_lewej {
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLs-qkckuwprqTCD9EK9ti5-W119zZPLbHHWq_EUXLh_Od2Q5IOA') no-repeat;
float: left;
width: 195px;
padding: 0;
margin: 0;
min-height:150px;
}
The value should be the height of the image you want to display.