100% parent div goes smaller than child div when min browser why?

HTML & CSS
1

Hi I’ve got a parent div of 100% inside there is a child div with width size in px but when I make the browser smaller the parent div stop been 100% and becames smaller than the child div is there a way I can make the parent div to always be 100% of the browser

here my code

<!DOCTYPE HTML>
<head>
<style type="text/css">
#parent_div {background-color:red; width:100%; padding:10px;}
.child_div {background-color:yellow; width:884px; margin:auto; clear:both; padding:10px;}
</style>
</head>
<body>



<div id="parent_div">
	<div class="child_div">
		<p>Compass Group UK &amp; Ireland Limited ("We") are committed to protecting and respecting your privacy.</p>
    </div>
</div>


</body>
</html>
2

Hi,

Just set a min-width on the parent equal to the largest fixed width element it contains (that rule applies to all 100% wide elements).


#parent_div {
	min-width:904px;
}
3

I may be reading the question wrong, but just in case you want the parent container to be fluid…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1174647-100-parent-div-goes-smaller-than-child-div-when-min-browser-why
Thread: 100% parent div goes smaller than child div when min browser why?
2013.10.25 09:40
macaela
-->
    <style type="text/css">

#parent_div {
/*    width:100%;  /* DELETE ME.  Why?  Probably unnecessary.  block selectors (divs, etc) are 100% width by default.  width:100% + padding exceeds 100% of the window width and triggers horizontal scroll bar. */
    background-color:red;
    padding:10px;
}
.child_div {
    max-width:884px;  /* Changed from "width" to "max-width" so it will narrow as the parent narrows */
/*    clear:both;   /* DELETE ME.  Why?  Nothing is floated in this example. */
    background-color:yellow;
    padding:10px;
    margin:auto;
}

    </style>
</head>
<body>

<div id="parent_div">
    <div class="child_div">
        <p>Compass Group UK &amp; Ireland Limited ("We") are committed to protecting and respecting your privacy.</p>
    </div>
</div>

</body>
</html>