Lightbox with flexible width - css

Question

I'm trying to make a floating menu for one of my projects but I just can't get it to work.
My aim is to be able to have a horizontal menu floating in in the middle of the screen with a content div underneath. The content div (#preferencescontent), should never be wider than the content insider it, but no wider than 90% of the screen.
Now to the problem. It seems to work, sometimes, and for unknown reasons. Some tables shrink the div to the size of the menu while others expands a lot. I've added an example which for some reason expands the div way more than I expect it to.
Here's the code (codepen below):
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
https://codepen.io/anon/pen/vdOXWj
Grateful for any help. Thank you!

Answer 1

You can try removing float from your elements.
Also, you are adding positioning coordinates to elements which have not been given an explicit position, so you can remove them.
codepen
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 80%;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>

Answer 2

If you remove "float:left;"
from "div.sidemenu"
Do you get your desired result? I'm not sure I understand what you are trying to achieve here.