Content <section> not staying in place - html

Question

I got this problem with my sections which is built up by a container, left menu, right menu and container:
#container {
margin: 40px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #111;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #272727;
}
When I'm shrinking the window, the problem starts to appear:
The content box is appearing to the right (looks like beneath) the right menu, and is not shrinking with the others. How is this fixed?
HTML:
<section id="container">
<section id="leftmenu">
<section class="contenthead">
<b style="font-weight: bold; color: #976535; text-align: center;"><center>HOVEDMENY</center></b>
</section>
</section>
<section id="content">
<section class="contenthead">» <? echo $page; ?></section>
</section>
<section id="rightmenu">
<section class="contenthead">
<b style="font-weight: bold; color: #976535; text-align: center;"><center>KOMMUNIKASJON</center></b>
</section>
</section>
</section>
</body>
</html>
Screenshot of the problem:
Help, anyone?!?

Answer 1

I would suggest you to use a fixed sidebar and a fluid content for this case in the desktop mode. Something like this might be a start for you...
.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}
<div class="main-content">
<div class="left-sidebar"></div>
<div class="right-fluid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
</div>
</div>
Try resizing the window in full screen and check it out.
Update
With your same code, it looks this way:
#container {
margin: 40px auto;
min-height: 400px;
position: relative;
padding: 0 200px;
}
#leftmenu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
box-sizing: border-box;
min-height: 600px;
background-color: #111;
text-align: center;
}
#content {
box-sizing: border-box;
background-color: #202020;
min-height: 600px;
color: #fff;
}
#rightmenu {
position: absolute;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
width: 200px;
min-height: 600px;
background-color: #272727;
}
<section id="container">
<section id="leftmenu">
<section class="contenthead">
<b style="font-weight: bold; color: #976535;">HOVEDMENY</b>
</section>
</section>
<section id="content">
<section class="contenthead">» Page</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, illo. Nulla saepe quasi sint nam, beatae adipisci labore mollitia. Minima assumenda corporis perspiciatis veritatis aut distinctio eligendi! Quam, deleniti, eveniet.</p>
</section>
<section id="rightmenu">
<section class="contenthead">
<b style="font-weight: bold; color: #976535; text-align: center;"><center>KOMMUNIKASJON</center></b>
</section>
</section>
</section>