Is this DIV layout possible? - css

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.

Answer 3

Can't find a solution width pure CSS, but here's how to do it with javascript / jquery.
Demo
HTML:
<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>​
CSS:
#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }
jQuery:
var right = $('#right'),
left = $('#left');
$(window).on('resize',positionRightDiv);
function positionRightDiv(){
var posLeft = left.offset().left + left.outerWidth(true),
posTop = left.offset().top;
right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();
Note: for this method to work, #wrapper must not have position:relative; nor overlow:hidden;
​
P.S. Nice atom heart mother profile pic ;-)