floating two divs side by side_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-24 23:35 出处：网络

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 drop开发者_JAVA百科s below the other. I think its because

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 drop开发者_JAVA百科s 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

Remove the margin-left: 505px; on div2

give width as "%"

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


#div2 {
     width:48%;
     border:1px dashed purple;
     float:left;
    }

#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>