title: Safari Browser Overlapping DIV Content
body: <p>I am not an expert developer and have limited knowledge about CSS. I am facing overlapping problem in Safari and Internet Explorer 10+.</p>
  
  <p>In Firefox, Google Crome and Opera my code is working fine but in
  Safari and IE - text are overlapping.</p>
  
  <p>Please supply a whole CSS code as I do not know much of it.</p>
  
  <p>My code is as below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;style&gt;
  
  *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: 
  border-box; box-sizing: border-box; }
  *{box-sizing: border-box; padding: 0; margin: 0;}
  
  body { margin: 0;}
  footer { border: 1px solid #ccc; padding: 1.25em; background-color: #c0c0c0; 
  }
  
  .max-width {max-width: 1400px; margin: 0 auto;}
  .site-container  { position: relative; margin: .5em; } 
  .left-column {  border: 2px solid #ccc; padding: 0.40em; }
  .right-column { border: 0px solid #ccc; padding: 1.25em; background-color: 
  #ffffff; }
  
  
  .floating-inline{display: inline-block;vertical-align: middle;}
  .nav { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0; 
  }
  
  
  img {
  max-width: 100%;
  height: auto;
  }
  
  
   header{position: fixed; left: 0; top: 0; width: 100%; height: 70px; 
   background: #6633cc; z-index: 3; color: #fff; text-align:center; font-size: 
   20px; padding: 10px 0;}  
  
   .panel{ height: 100%; position: absolute; top: 0 }
  
   .center{padding:0px 190px 0 207px; position: absolute; width:100%; top: 0; 
    left: 0; background: #ffff99; overflow-y:scroll}
  
   .left{ padding: 5px 0 0 0; left: 0; width:200px; background: #0f0; z-
    index:2;}
  
    .right{ padding: 5px 0 0 0; right: 0; width: 200px; background: #f00; z-
    index:2;}
  
  
    @media (max-width: 1024px) {
    .left { display: none; }
    .right { display: none;  }
    .center{padding:0px 6px 0 10px; position: absolute; width:100%; top: 0; 
     left: 0; background: #ccffcc; overflow-y:scroll}
     }
  
    /* MEDIA QUERIES */
    @media screen and (min-width: 47.5em )
    {
  
      .left-column { margin-right: 22.5em; }
      .right-column { position: absolute; top: 0; right: 0; width: 21.75em; }
    }
  
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
     &lt;header&gt;
     Nevigation Menus Goes here &lt;br&gt;
     Menu 1 , Menu 2, Menu 3 &lt;br&gt;
     &lt;/header&gt;
  
      &lt;nav class="left panel" align="center"&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;img src="196 x1000-Left.jpg" width="196" height="650" 
       border="0" alt="img"&gt; 
       &lt;/nav&gt;
       &lt;aside class="right panel" align="center"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;img src="196 x1000-Left.jpg" width="196" height="650" border="0" alt="img"&gt;
   &lt;/aside&gt;
  
    &lt;section class="center panel"&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
      &lt;div class="max-width"&gt;
          &lt;div class="site-container"&gt;
              &lt;main class="left-column"&gt;
                  &lt;h2&gt;Left Column (fluid)&lt;/h2&gt;&lt;br&gt;
  
                 &lt;p align="justify" &gt;
                 &lt;b&gt;1st Para &lt;/b&gt; : Lorem Ipsum is simply dummy text of the 
    printing and typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown printer took a 
    galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic 
    typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum
                 &lt;br&gt; &lt;br&gt;    
  
                 &lt;b&gt;2nd Para &lt;/b&gt;: Lorem Ipsum is simply dummy text of the 
    printing and typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown printer took a 
    galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic 
    typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum
                 &lt;br&gt; &lt;br&gt;    
                 &lt;br&gt; &lt;br&gt;
  
                 &lt;b&gt;3rd Para &lt;/b&gt;:Lorem Ipsum is simply dummy text of the 
    printing and typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown printer took a 
    galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic 
    typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum
                 &lt;br&gt; &lt;br&gt;
  
                 &lt;b&gt;4th Para &lt;/b&gt; :Lorem Ipsum is simply dummy text of the 
    printing and typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown printer took a 
    galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic 
    typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum
                 &lt;br&gt; &lt;br&gt;
  
                 &lt;b&gt;5th Para &lt;/b&gt; : Lorem Ipsum is simply dummy text of the 
    printing and typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown printer took a 
    galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic 
    typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum&lt;/p&gt;
  
  
              &lt;/main&gt;
  
              &lt;aside class="right-column"&gt;
                  &lt;h2&gt;Right Column&lt;/h2&gt;&lt;br&gt;
                  &lt;h4&gt; This Flots below Left Column while resizing &lt;/h4&gt;
                  &lt;br&gt;
                  &lt;p align="justify"&gt;Lorem Ipsum is simply dummy text of the 
         printing and typesetting industry. Lorem Ipsum has been the 
         industry's standard dummy text ever since the 1500s, when an unknown 
         printer took a galley of type and scrambled it to make a type 
         specimen book. It has survived not only five centuries, but also the 
         leap into electronic typesetting, remaining essentially unchanged. It 
         was popularised in the 1960s with the release of Letraset sheets 
         containing Lorem Ipsum passages, and more recently with desktop 
         publishing software like Aldus PageMaker including versions of Lorem 
         Ipsum&lt;/p&gt;
  
                  &lt;br&gt;
               &lt;/aside&gt;
          &lt;/div&gt;
      &lt;footer&gt;
      &lt;div id="my_menu" align="center"&gt;
      &lt;a href="#" class="current"&gt;Home&lt;/a&gt; &amp;nbsp; | &lt;a href="#"&gt;Bloggs&lt;/a&gt; 
     &amp;nbsp;  | &lt;a href="#"&gt;Contact&lt;/a&gt;
  
    &lt;/div&gt;
    &lt;/footer&gt;
  
    &lt;/div&gt;  
    &lt;/section&gt;
  
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>Snapshot of problem: <a href="https://i.stack.imgur.com/PLcQd.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/PLcQd.jpg</a></p>