"Stretch" div to the edge of the browser

Question

I am trying to create a fixed-width layout with headers that “stretch” to the edge of the users browser. Like this...

Any ideas how I can achieve this?

Answer 1

It works great. He may use some refinements, but the idea is pretty solid.

Live Demo ( edit )

CSS

html, body { margin: 0; padding: 0; border: 0; overflow-x: hidden } body { background: #eee } #container { width: 80%; margin: 0 auto; background: #bbb; } #menu { overflow: auto } #menu li { float: left; width: 40px; margin: 5px; height: 24px; background: #fff } h1, h1 span, h2, h2 span { padding: 3px 0; height: 25px; } h1, h2 { position: relative; margin: 9px 0 } h1 span, h2.left span { display: block; position: absolute; width: 100%; left: -100%; top: 0 } h2.right span { display: block; position: absolute; width: 102%; left: 100%; top: 0 } h1 { background: red; width: 80% } h1 span { background: blue /* blue for demonstration purposes */ } h2.left { background: red; width: 30%; float: left } h2.left span { background: blue /* blue for demonstration purposes */ } h2.right { background: red; width: 30%; float: right } h2.right span { background: blue /* blue for demonstration purposes */ } #content { clear: both } 

HTML:

 <div id="container"> <h1><span></span>Heading</h1> <h2 class="left"><span></span>Sub-heading</h2> <h2 class="right">Sub-heading<span></span></h2> <div id="content"> Hi! </div> </div> 

Answer 2

Maybe you could use the illusion for this? You can try to have a blue bar = 100% wide behind the entire contents of your page, so that it is displayed only to the right of the blue “subtitle” section, but always reaches the right edge. You just need to make sure that you have eclipsed the rest of (something to the left of the blue “subtitle” element).

Answer 3

if you want to be fixed in it, you can use position:fixed otherwise position:absolute . Then with left:0 and right:0 you put them on the left or right side. Using top , you can set the offset from above.

Demo: http://jsbin.com/awoke3

Answer 4

Maybe this will work?

 <h1 id="mainHeader">Heading</h1> #mainHeader { float:left; clear:both; width:800px; background-color:#ff0000; color:#fff; } 

Answer 5

Here is my attempt to use JavaScript while maintaining a fixed-width center: Demo

Otherwise, I don’t think you want using pure CSS, but I could be wrong.