Not sure if this is achievable using only CSS, but here's a handy snippet of JavaScript code that can help you manage fixed and percent-based page widths more effectively:
function resize() {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
}
You can then call the resize()
function on page load, as well as on page resize. So something like:
<body onload="resize()">
From here, because you have a calculated width of the page, you can resize your individual div
s accordingly:
document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("centerbox").style.width = 300 + "px";
The centerbox
maintains a fixed with of 300 pixels, while leftbox
and rightbox
have widths equal to the width of the screen minus 300 pixels, divided by two.