Home/ Questions/Q 3608770
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:32:35+00:00

I want to put 3 parallel divs in html. div middle should be the

  • 0

I want to put 3 parallel divs in html. div middle should be the width of 960px and center of the page, div left and div right will be both site of the div middle,the page min-width will be 1024px, when the browser’s width is more than 1024px,div left and div right maybe width (100%-960px)/2 the overflow-x is hidden. When the browser’s width is equal and less than 1024, div left and div right maybe width 32px ((1024-960)/2=32px), overflow-x is scroll(the page width show 1024px. I use this code,but it can not adjust the width unless refresh the page. How to do dynamic adjustment width and overflow-x?
Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head> 
<body> 
<style> 
*{padding:0;margin:0;} 
#box {min-width:1024px; _width:960px;} 
#left {width:32px;float:left;background-color:blue;} 
#middle {width:960px;float:left;background-color:red;} 
#right {width:32px;float:left;background-color:green;} 
</style> 
<script> 
$(document).ready(function() { 
var width = document.body.clientWidth; 

if(width>1024){ 
$('#box').css({ 
width:width + 'px' 
});     
$('#left').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
$('#right').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
} 

}); 
</script> 
<div id="box"> 
<div id="left">1</div> 
<div id="middle">2</div> 
<div id="right">3</div> 
</div> 
</div> 
</body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try:

    <script> 
$(document).ready(function() { 
  var width = document.body.clientWidth;
  windowResize(width);
  $(window).resize(function() { 
    windowResize(width);   
  });
});

function windowResize(width) {
  if(width>1024){ 
    $('#box').css({ 
      width:width + 'px' 
    });     
    $('#left').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
    $('#right').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
  } 
}
</script>
    • 0