Child div jumps outside parent when page is zoomed out

This happens in IE and FF, but Chrome is OK.

The problem child is:
<div class="floatright feature-content feature-r">&nbsp;</div>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
     <head>
          <style type="text/css">
          /* RESET */
          /* ----------------------------------------- */

          /* Global reset */
          /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
          *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
          table { border-collapse:collapse; border-spacing:0 }
          fieldset, img { border:0 }
          address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
          ol, ul, li { list-style:none }
          caption, th { text-align:left }
          h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
          q:before, q:after { content:''}

          /* Global reset-RESET */
          /* The below restores some sensible defaults */
          strong { font-weight:bold }
          em { font-style:italic }
          a img { border:none } /* Gets rid of IE's blue borders */

          /* Utility Classes */
          .floatright {float:right;}
          .floatleft {float:left;}

          /* Customized Styles */

          body {
               background-color: #FFF;
               height:100%;
               font: 14px Verdana, sans-serif;
               line-height:20px;
          }
          #container {
               width:960px;
               margin:0 auto -250px;
               min-height:100%;
               height:auto !important;
               height:100%;
               min-width:960px;
               background-color:#cccccc;
          }
          #features {
               position:relative;
               background-color: #4c4543;
               margin: 0 10px 0px 10px;
               border-top-style: solid;
               border-top-width: 2px;
               height:  192px;     
          }
          .feature-l {
               margin: 10px 5px 10px 10px;
               padding: 10px;
          }
          .feature-r {
               margin: 10px 10px 10px 5px;
               padding: 10px;
          }
          .feature-content {
               background-color:white;
               width: 434px;
               height: 150px;
               border-top-style: solid;
               border-top-width: 1px;
               border-top-color:black;
               border-left-style: solid;
               border-left-width: 1px;
               border-left-color: black;
          }
          </style>
     </head>
     <body>
          <div id="container">
               <div id="features">
                         <div class="floatleft feature-content feature-l">&nbsp;</div>
                         <div class="floatright feature-content feature-r">&nbsp;</div>
               </div>
          </div>
     </body>
</html>

Open in new window

LVL 16
JF0Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
Add width 100% or a fixed width to your #features div.  
0
JF0Author Commented:
width: 100% fixes the issue but then it causes the #features div to extend outside of its parent.

I then set the width to 940px but this causes the original issue again.
0
LZ1Commented:

That's because of the margin you have on the #features. It's accommodating itself regardless of its container.  You would have to either add 20px to the #container or reduce the margin on #features
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

JF0Author Commented:
Other solutions? I want to keep my container at 960 and the margin is necessary for design.
0
LZ1Commented:
At the end of the day it's basic math.  You have a 10px margin to an element that is 960px wide.  That equates to 970px.  
Your container is 960px wide.  I'm not sure there is any other way.
0
JF0Author Commented:
If I just make the container 970px or 10000px wide putting 100% on the feature would still produce the same problem.
0
LZ1Commented:
Just making the container 980px(10px on each side) worked fine with the 960px fixed width on the #features.
0
JF0Author Commented:
Ok, that works. But if I choose 960 for container and 940 for features I reproduce the original problem. All we're doing is scaling the dimensions of the original problem but it works with bigger numbers?
0
JF0Author Commented:
Found the culprit. Back to the original code above but I have made the "feature-content" 1 px smaller.


0
JF0Author Commented:
One more note: with the smaller feature-content I can zoom out and only have the original problem at the most extreme zoom-out. But this is ok!
0
blueghoztCommented:
To keep the child from leaving the parent add

overflow:hidden;

to the #features styles - guaranteed to keep the floats in check!
0
JF0Author Commented:
blueghozt - that does not work
0
blueghoztCommented:
a real puzzler this one, try this - works for me - floated both boxes left - seems like it's all in the margins of the feature-l and feature-r not shrinking to scale - so giving headroom for these whilst maintaining the illusion of 10px all round might be the only answer


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
     <head>
          <style type="text/css">
          /* RESET */
          /* ----------------------------------------- */

          /* Global reset */
          /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
          *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
          table { border-collapse:collapse; border-spacing:0 }
          fieldset, img { border:0 }
          address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
          ol, ul, li { list-style:none }
          caption, th { text-align:left }
          h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
          q:before, q:after { content:''}

          /* Global reset-RESET */
          /* The below restores some sensible defaults */
          strong { font-weight:bold }
          em { font-style:italic }
          a img { border:none } /* Gets rid of IE's blue borders */

          /* Utility Classes */
          .floatright {float:right;}
          .floatleft {float:left;}

          /* Customized Styles */

          body {
               background-color: red;
               height:100%;
               font: 14px Verdana, sans-serif;
               line-height:20px;
          }
          #container {
               width:960px;
               margin:0 auto -250px;
               min-height:100%;
               height:auto !important;
               height:100%;
               min-width:960px;
               background-color:#cccccc;
          }
          #features {
               position:relative;
               background-color: #4c4543;
               margin: 0 10px 0px 10px;
               border-top-style: solid;
               border-top-width: 2px;
               height:  192px;

          }
          .feature-l {
               margin: 5px;
	       margin-left:10px;
               padding: 10px;
          }
          .feature-r {
               margin: 5px;
               padding: 10px;
          }
          .feature-content {
               background-color:white;
               width: 434px;
               height: 150px;
               border-top-style: solid;
               border-top-width: 1px;
               border-top-color:black;
               border-left-style: solid;
               border-left-width: 1px;
               border-left-color: black;
			   
          }
          </style>
     </head>
     <body>
          <div id="container">
               <div id="features">
                         <div class="feature-content feature-l floatleft">&nbsp;</div>
                         <div class="feature-content feature-r floatleft">&nbsp;</div>
               </div>
          </div>
     </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
blueghoztCommented:
sorry I made the page red for clarity
0
JF0Author Commented:
This works great on the example; the child only jumps when zoomed completely out in IE (but that is not a legitimate scenario!). Now give me over the weekend to test it on my real page.

I agree shrink-to-scale issue, those PHD's really paid off over at Google!

Thanks, so far!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.