Question

I am having trouble generating a HTML/CSS layout. The best way to think of it is to take a normal horizontally centered page layout. Only I want one div to extend beyond the centered layout to the right edge of the browser window.

This should work fluently with browser window resizing.

Answer 1

Here are two CSS-only methods to achieve layouts like this. Both have been briefly tested in IE 7/8/9 and Chrome.

Example 1

Here’s an example where you know the heights of all your elements.

Demo: http://jsfiddle.net/3RDuy/2/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }​

Example 2

Here’s an example where you only know the height of the top and bottom.

Demo: http://jsfiddle.net/3RDuy/3/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa;  height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }​

---

If you want variable heights on everything (including the ability to have a height greater than 100%) you will probably need to use JavaScript.