Is this DIV layout possible?

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.

Answer 2

This was a very interesting challenge.

I needed a similar effect several months ago with an element extending out of the container to the window's edge, but did not need that space available for content - it was merely a design effect.

Tim's answer is solid, but needing to know the height of an element is not practical. My solution eliminates this requirement.

Making use of a wrapper, some padding and negative margins, we can manipulate our layout to replicate the desired functionality.

Markup:

<div class="header">
    <h1>Hello World!</h1>
</div>

<div class="content">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

<div class="footer">
    <p>Lorem ipsum dolor sit amet.</p>
</div>​

CSS:

.header,
.footer {
    clear: both;
    margin: auto;
    width: 600px; /* Your container width */
    background: grey;
    }

.content {
    float: right;
    width: 50%;
    padding-left: 300px; /* Half of your container width */
    }

.a {
    float: left;
    margin-left: -300px; /* Half of your container width */
    width: 200px;
    height: 10em;  /* Not required, set for visual */
    background: red;
    }

.b {
    margin-left: -100px; /* The difference between half your container width and element A */
    height: 10em; /* Not required, set for visual */
    background: yellow;
    }

Demo: http://jsfiddle.net/rkW9J/

It should be noted that this hasn't been tested extensively cross-browser, but doesn't implement any obvious layout quirks so we should be good.