I am trying to create an arrangement whereby there are three divs within a div that fills up 100%-width of a page. The middle div will have a fixed width and the two outer divs will take up 50% each of the remaining space. Is this achievable using CSS?
I have set up a fiddle, that doesn't work, http://jsfiddle.net/6y5hn/ with my attempt at achieving this, with the following code:
<div id="outerbox">
<div id="leftbox">(elastic width) This should occupy all the space in the grey box to the left of the red box</div>
<div id="centerbox">(fixed-size) should be in the center of the grey box</div>
<div id="rightbox">(elastic width) This should occupy all the space in the grey box to the right of the red box</div>
</div>
With the CSS:
#outerbox {
background-color:gray;
margin-top:50px;
width:100%;
height:200px;
}
#centerbox {
background-color:red;
margin-left:auto;
margin-right:auto;
float:left;
height:100px;
width:300px;
}
#leftbox {
background-color:yellow;
height:300px;
float:left;
}
#rightbox {
background-color:pink;
height:300px;
float:left;
}
James
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 divs 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.
add width:calc(50% - 150px); to #leftbox and #rightbox (150px = half of the centerbox width)
http://jsfiddle.net/6y5hn/2/
browser support: http://caniuse.com/calc
Just use float with the a fixed width
#fixed{float:left;width:360px;background-color:green;height:100%;color:yellow;}
#elastic{background-color:#ddd;height:100%;color:grey;}
http://jsfiddle.net/am46bm43/
