2 Replies Latest reply on Mar 1, 2010 3:39 PM by Nancy OShea

    IE6 child div expands width of parent div

    jeremy@noble Level 1

      I have a problem that has been vexing me...hopefully someone can answer it.

       

      I want to have a child div expand to overlap the div next to it. It is for a calendar so that all day events that stretch for multiple days can stretch over and cover multiple days.

       

      In IE6, the child div expands the width of the parent div and wrecks my display. The "proper" way that FF, Safari, and IE 7 & 8 do is that the child div will overlay the parent. The parent div's width remains unchanged, no matter what the width of the child is. IE6 incorrectly expands the width of the parent div to match that of the child div.

       

      I've set up a small example so you can see the difference. Check it out in FF and then in IE 6. Notice that in IE6 the "parent" div is too wide. In FF it looks fine.

       

      Any way to get IE6 to behave like FF in this case?

       

      Thanks!

       

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Div Test</title>
      <style type="text/css">
      <!--
      .parent {
           width: 200px;
           background-color: #FFC;
           border: 1px solid #000;
           float: left;
      }
      .child {
           width: 300px;
           background-color: #CAEDFF;
           border: 1px solid #000;
           z-index: 20;
           position: relative;
      }
      -->
      </style>
      </head>
      
      <body>
      
          <div class="parent">
          Parent Content
          </div>
          <div class="parent">
          Parent Content
          </div>
          
          <br>
          <br>
          
          <div class="parent">
            <div class="child">Child Content</div>
          </div>
          <div class="parent">
          Parent Content
          </div>
      
      </body>
      </html>
      

       

       

        • 1. Re: IE6 child div expands width of parent div
          Nancy OShea Adobe Community Professional & MVP

          Adobe forums aren't accepting attached files right now.  You'll have to upload your test page to your remote server and post a URL for us to see what you mean.

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: IE6 child div expands width of parent div
            Nancy OShea Adobe Community Professional & MVP

            I see now you posted your code.  Thanks.

             

            For best cross browser results, the floated container needs to be wide enough to accomodate everything inside it. Some browsers will resize others won't.   For another approach see my code.  This uses a disjointed rollover method.

             

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Div Test</title>
            <style type="text/css">
            
            .parent {
                 padding: 8px;
                 width: 200px;
                 background-color: #FFC;
                 border: 1px solid #000;
                 float: left;
            }
            
            /**formerly know as .child**/
            
            .parent a span {
                 width: 300px;
                 padding: 10px;
                 background-color: #CAEDFF;
                 border: 1px solid #000;
                 position:absolute;
                 top:55px; /**adjust as required**/
                 left:55px; /**adjust as required**/
                 display:block;
                 visibility:hidden;
            }
            
            .parent a:hover span,
            .parent a:active span, 
            .parent a:focus span {visibility:visible}
            
            .parent a:hover, 
            .parent a:active,
            .parent a:focus {text-decoration:none; visibility:visible;}
            
            </style>
            </head>
            <body>
            <div class="parent">
            <p>Parent content</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
            <a href="http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml">Link to Child Layer<span>Child Content renamed to <strong>.parent span</strong>.  Content inside the span tag is absolutely positioned. <br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus.</span></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
            </div> <!--end parent -->
            </body>
            </html>
            
            

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com