SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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).

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

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    I may be reading the question wrong, but just in case you want the parent container to be fluid...
    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •