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.
2
Answers
Well, although the widths of
.menu
and.content
might add up to 100% or less in a wider format, due to themin-width
pixel setting of.menu
, they will become wider than 100% when you decrease the window width, since the 200px ofmin-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 assigndisplay: flex
to that. Additionally, addflex-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
aswidth: 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)
here is the solution-