I've been struggling for awhile trying to make a 3x3 grid layout in which the center div has a fixed width & height, and the rest grow to fit the window size as needed, but I can never get the non-center divs to behave. I've found some solutions that worked for a two-column layout, but I couldn't figure out how to adapt them to three. Here's what I have so far: http://jsfiddle.net/WGaVH/
New to CSS here, so any help is very much appreciated. Thanks!
Display table makes this easy:
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
.grid3x3 {
display:table;
height:100%;
width:100%;
}
.grid3x3 > div {
display:table-row;
width:100%;
}
.grid3x3 > div:nth-child(2) {
height: 100px;
}
.grid3x3 > div > div {
display:table-cell;
}
.grid3x3 > div > div:nth-child(2) {
width:100px;
}
div {
outline: 1px solid orange;
}
</style>
<div class="grid3x3">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>