I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look:
After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: hidden:
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
Unfortunately, this solution doesn't seem to work with IE9, even though it works fine on IE8.
I'm at a loss for ideas, so if anyone has any insights into what might be causing the issue, please let me know. The workaround seems almost perfect except for IE9.
NOTE: It's important that the content div remains flexible as shown in the demo. It should adjust its size to fit the available space as it decreases.