3

I'm trying to float two divs side by side no matter what the size of the screen is. At the moment in IE 7 if I resize the windows the one div drops below the other. I think its because div2 contains a table and as soon as the edge of the window hits the table it drops below the div1.

What I currently have works in IE9 and Firefox but it needs to work in IE6+7. I tried this solution CSS floats - how do I keep them on one line? but it didn't seem to help. Again I think this maybe due to the content that is inside these divs. How to replicate it?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  #wrapper { 
    min-width:510px; 
    width: auto !important; 
    width: 510px; 
    border: 1px solid red; }

  #div1 {
    float:left;
    color:blue;
    width:500px;
    border: 1px dashed purple; 
    height: 400px;}

  #div2 {
    margin-left:505px;
    border:1px dashed purple;}

  #div2 table{border: 1px dotted green;}

</style>
</head>
<body>
  <div id="wrapper">
    <div id="div1" >
      Sometimes I contain a table and sometimes I contain an object. Bother of which displays a chart
    </div>    
    <div id="div2">    
       <table>
        <tr>
         <td> I am normally a report
           asdfasdfads
           dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, today has been quiet hot but somehow a bit cooler than this time last year. 
         </td>
       <td></td>
       </tr>
      </table>
    </div>
  </div>
</body>
</html>

A live example can be found here http://jsbin.com/awijew/11

Community
  • 1
  • 1
Alistair Laing
  • 983
  • 1
  • 7
  • 18
  • Your div2 doesn't float at all - make it `float:left;` and set the positions of the divs to relative. – Quasdunk Aug 04 '11 at 07:53
  • I updated it but its still dropping. http://jsbin.com/awijew/12 – Alistair Laing Aug 04 '11 at 07:56
  • I've been trying quite a lot now on jsbin, but I just don't get it working... Really weird problem! I hope someone can solve it :) – Quasdunk Aug 04 '11 at 08:30
  • Me too. I spent most of yesterday on Freenodes #css IRC and I had suggestions and improves so it was not working at all in IE but managed to get it to work in IE9 by adding a margin to div2. – Alistair Laing Aug 04 '11 at 08:33

3 Answers3

0

#wrapper{
    display: flex;
    justify-content: space-between;
    border: 2px dotted red;
    padding: 20px;
}
#wrapper div{
    width: 48%;
    border: 2px dotted purple;

}
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JS Bin</title>
    </head>
    <body>
    <div id="wrapper">
    <div id="div1" >
      Sometimes I contain a table and sometimes I contain an object. Bother of 
      which displays a chart
    </div>    
    <div id="div2">    
       <table>
         <tr>
          <td> I am normally a report
           asdfasdfads
           dsafasdfasdfasdfasdfadsfasdfasdadfadsfadfsdfasdfsdffGreat Thanks, 
           today has been quiet hot but somehow a bit cooler than this time last 
           year. 
          </td>
          <td></td>
         </tr>
       </table>
    </div>
    </div>
    </body>
    </html>
Edu
  • 2,354
  • 5
  • 32
  • 36
ARPIT
  • 1
  • 1
0

Remove the margin-left: 505px; on div2

anderssonola
  • 2,195
  • 16
  • 29
  • div1 has a width of 500px, so if window size drops below it, div2 will drop down below. Work like this in my ie7, can't test in ie6 – anderssonola Aug 04 '11 at 08:41
0

give width as "%"

Like

#div1 {
    float:left;
    color:blue;
    width:48%;
    border: 1px dashed purple; 
    height: 400px;
}


#div2 {
     width:48%;
     border:1px dashed purple;
     float:left;
    }
Mr.T.K
  • 2,318
  • 6
  • 26
  • 42