I am attempting to create 3 parallel divs in HTML. The middle div should be exactly 960px wide and centered on the page, with the left and right divs positioned on either side. The minimum width of the page is set to 1024px. When the browser width exceeds 1024px, the left and right divs may have a width of (100%-960px)/2 with overflow-x hidden. However, when the browser width is equal to or less than 1024 pixels, the left and right divs should adjust to a width of 32px each (as calculated by (1024-960)/2=32px) with overflow-x scroll to maintain the appearance of a 1024px-width page. Currently, my code does not dynamically adjust the widths unless I refresh the page. How can I achieve dynamic adjustment of width and overflow-x? Thank you.
<!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>