DIV's side by side within a container - html

Question

I am working on an internal program for work that is essentially built on PHP. My problem is that I have a a header, a side navigation, the main content (to the right of the nav) and a footer. Rough Layout Picture
My issue is that I have two DIV's within a container, the nav is set to a percentage with a minimum width, and the content section is set to take the remaining space. In total both the nav and content should take about 91% of the screen real estate. Whats Happening after shrinking the browser a bit
My CSS looks like this for the fields I think are relevant:
.container{
width: 100%;
float: inline-block;
}
.header{
float: left;
text-align: left;
background-color: lightblue;
width: 100%;
vertical-align: middle;
display: block;
border-radius: 15px;
}
.header h1{
font-weight: bold;
font-size: 40px;
text-indent: 50px;
}
.msg_alert{
background-color: green;
color: white;
width: 95%;
padding: 5px;
border-radius: 10px;
}
.err_msg_alert{
background-color: red;
color: white;
width: 95%;
padding: 5px;
border-radius: 10px;
}
.menu{
float: left;
width: 13%;
border: 3px solid grey;
padding: 5px;
background-color: lightgrey;
border-radius: 15px;
margin-top: 20px;
margin-right: 20px;
min-width: 200px;
}
.menu a{
float: left;
color: black;
text-align: left;
padding: 14px;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin: 3px;
background-color: lightblue;
width: 40%;
min-width: 150px;
border-radius: 15px;
}
.menu a:hover{
background-color: grey;
color: black;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li{
padding: 8px;
margin-bottom: 7px;
}
.content{
float: left;
width: 78%;
padding: 20px;
margin-top: 20px;
margin-left: 20px;
/*border: 3px solid red;*/
}
.footer{
display: inline-block;
width: 100%;
background-color: lightgrey;
border-radius: 15px;
font-size: 12px;
text-align: center;
margin-top: 5px;
padding-bottom: 10px;
}
I'm not sure what I've done wrong. Everything displays properly if the browser is in full screen but when I shrink it down to about 3/4's of the browser size the nav stays where it should be but the contents move below.
I have setup a mobile version which works perfectly but the desktop mode is what I am having issues with.
Thank you for the help in advance.

Answer 1

here is the solution-
<div class="header"></div>
<div class="menu_content">
<div class="menu"></div>
<div class="content"></div>
</div>
<div class="footer"></div>
.menu{
width: 13%;
border: 3px solid grey;
padding: 5px;
background-color: lightgrey;
border-radius: 15px;
margin-top: 20px;
margin-right: 20px;
min-width: 200px;
}
.content{
width: calc(100% - 21.7%);
padding: 20px;
margin-top: 20px;
margin-left: 20px;
border: 3px solid red;
}
.menu_content {
display: flex;
align-items: flex-start;
}
.menu_content::after {
content: '';
clear: both;
display: block;
}

Answer 2

Well, although the widths of .menu and .content might add up to 100% or less in a wider format, due to the min-width pixel setting of .menu, they will become wider than 100% when you decrease the window width, since the 200px of min-width: 200px; will become much more than the 13% width you define for it. So (since both are floats), .content will go below .menu, because there isn't enough space anymore for it next to .content.
To avoid that, you can wrap both of these in a div container and assign display: flex to that. Additionally, add flex-shrink: 0; (= allowed to get smaller) to .content. This should basically do the trick. (There are other details , but just check out some tutorial about flex - it's really not complicated at all.)
Another approach would be to define the menu width as 200px (fixed) and the width for .content as width: calc(100% -200px) - The full width of the parent minus 200px, whatever the width of the parent is.
(This doesn't calculate padding, margins etc. - you would have to consider that in the "real" values you use)