webpage collapses when minimizing html & css - html

Question

My body div collapses under the left bar navigation when i begin to minimize the window.
Can somebody please advise on what i have done wrong or what more i need to do.
Much appreciated, thank you.
css snippet:
#navigation {
float: left;
min-width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: left;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}
#header{
position: relative;
width:100%;
height:96px;
margin-left: 5px;
}
#footer {
font-family: Trebuchet MS;
font-size: x-small;
padding:2px;
margin:0px;
background-color:#CBE3F6;
color:#fff;
border-bottom: 1px solid #9EC4E2;
border-top: 1px solid #9EC4E2;
text-align:center;
width: 100%;
}
#wrapper{
position: relative;
margin-left: 5px;
}
#container {
width: 100%;
height:100%;
}
Template of a page:
<?php require_once 'includes/header.php';?>
<div id="wrapper">
<?php require_once 'includes/nav.php'; ?>
<div id="centerDoc">
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
</body>

Answer 1

Remove float attribute from #centerDoc, and add margin-left: 20%. to it
Then change min-width: 20% in #navigation to width: 20% or max-width: 20%. Without this the text inside centerDoc flows under the #navigation.
You might want to keep your measurement synchronized. You have width: 80% in #centerDoc and min-width in #navigation. It might be easier to picture the layout if you'd used plain width in both occasions and assigned the min/max-width attributes to the body of the page (so the widths of the #navigation and #centerDoc are relative to the common parent of them).
Edit: CSS:
#navigation {
float: left;
width:20%;
}
#centerDoc {
width: 80%;
margin-left:20%;
}
#header{
width:100%;
height:96px;
}
#container {
max-width: 1200px;
min-width: 600px;
}
Removed the #wrapper. See the max-/min-width´ in the#container. The scrollbars appear into the browser when the page is less then 600 pixels wide. The page also doesn't become wider then 1200 px. This allows you to define thewidths of the#navigationand#centerDoc` as percentages.
With the following HTML everything should work properly. (Althought I don't know what's inside nav.php. Hopefully nothing that clears the floating of the #navigation)
<div id="container">
<?php //require_once 'includes/header.php';?>
<div id="navigation">
<?php //require_once 'includes/nav.php'; ?>
<p>Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div> <!--navigation !-->
<div id="centerDoc">
<p>Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div> <!--centerDoc !-->
</div> <!--container !-->

Answer 2

I would change min-width in #navigation to max-width.
That way we make sure that the left navigation bar has not more than the 20% of the width of the page.
Edit:
#navigation {
float: left;
width: 20%;
margin: 0;
margin-top: 5px;
font-weight: normal;
}
#centerDoc {
float: right;
width: 80%;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 0px;
}