Логично, Вы же задали ширину заголовка 100% от окна.
В общем случае для осуществления Вашей задумки нужны познания в верстке с исползованием "резинового дизайна": самое простое использовать таблицы, дальше больше: JavaScript c отслеживанием событий window.onresize или window.onscroll, что в свою очередь потянет головняки с написанием отдельного кода под IE, FF, Opera, Safari и т.д., а также выскакиванием жизнерадостных сообщений IE, что страница содержит опасный код.
Вот проверенный на IE и FF вариант (хотя подозреваю, что есть решения изящней через "подстановки" width="&{..." и style="width:expression(document.body.scrollLeft... или типа того, но все это изящество, как правило, в ущерб универсальности, только голову забивать ненужными фактами):
<html>
<head>
<title></title>
</head>
<body style="margin:0px" onresize="document.getElementById('ddd').style.width=document.body.scrollLeft + document.body.clientWidth" onscroll="document.getElementById('ddd').style.width=document.body.scrollLeft + document.body.clientWidth">
<h1 id="ddd" style="background-color:green; width:100%"> резиновый </h1>
<h1 style="background-color:red; width:100%"> 100% </h1>
<table style="background-color:yellow; width: 1200px;">
<tr><td>слева</td><td align="right">справа</td></tr>
</table>
</body>
</html>
</html>
