1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by macaela, Oct 25, 2013.

  1. #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>
    HTML:

    SEMrush
     
    macaela, Oct 25, 2013 IP
    SEMrush
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    Apply min-width to the parent div. But seriously, padding and a fixed width? I doubt you should be fixing that width in the first place. And that clear property: does it have any purpose? If not, shake it off.
     
    wiicker95, Oct 25, 2013 IP
  3. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Hi Min width doesnt do anything as I need the parent div to be full browser width but somehow when I use as 100% it stops from been 100% when minimise the browser
     
    macaela, Oct 25, 2013 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    Yes it does, and that's your problem... You don't actually understand how css works, right?

    This is a way to do that :

    
    <!DOCTYPE HTML>
    <head>
    <style type="text/css">
    /*this resets all margins and paddings (delete it when implementing)*/
    * {
       margin:0;
       padding:0;
    }
    #parent {
       background-color:red;
       width:100%;
       padding:10px 0;
       min-width:904px; /*#parent's child width + padding*/
    }#parent div {
       background-color:yellow;
       width:884px;
       margin:auto;
       padding:10px;
    }
    </style>
    </head>
    <body>
    <div id="parent">
       <div>
            <p>
            Compass Group UK &amp; Ireland Limited ("We") are committed to protecting and respecting your privacy.
            </p>
      </div>
    </div>
    </body>
    </html>
    Code (markup):
    I repeat, that's A way to do it. That's most likely not how I would do it, but I don't really get what you need these containers for so I have to go with that. The first thing I would do is axe that HTML5 garbage.

    And one more thing: don't, ever, write "#parent_div" if #parent is a div. That's just nonsensical. A similar thing people do is this :

    </div> <!--end #somediv-->
    Code (markup):
    Writing "end" in that comment is more that redundant : doesn't the slash say it already??
    FYI, it should go comment and then closing tag, i.e. <!-- #somediv --></div>. It avoids tripping bugs on some old browsers.

    That other class was also redundant, btw. See the example I gave you.

    Hope it helps!
     
    wiicker95, Oct 25, 2013 IP
    ryan_uk likes this.
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,448
    Likes Received:
    1,907
    Best Answers:
    246
    Trophy Points:
    515
    #5
    Uhm... since the default behavior of a DIV is to expand to the available width OR the width of it's children... Isn't the right answer to lose the width altogether?

    Though yeah, lose the fixed width on the inner DIV since that's accessibility trash.
     
    deathshadow, Oct 25, 2013 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Yeah, but for some reason he wants his width fixed... I noticed that saying that fixed width is bad practice around here (which is entirely true) starts an all new discussion in the same thread, going off-topic and bashing the person who originally said it. People get mad when you tell them they don't know squat about what they're doing.
     
    wiicker95, Oct 25, 2013 IP
  7. Kamarsu Ravindra Babu

    Kamarsu Ravindra Babu Member

    Messages:
    6
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    33
    #7
    I think you have to give both div width in percentage only.
     
    Kamarsu Ravindra Babu, Oct 28, 2013 IP