HTML div bg color out of screen - css

Question

I want to create a <div> element with background color, which starts in the middle of the screen and goes to the right, to the end of the page (out of screen) , but I don´t want to trigger any scroll bar. In that <div> I want to have some information, at the beginning of that <div>(within the screen). Here´s the HTML code example:
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
This is how I want it to look like:
http://postimage.org/image/h60apjfjf/

Answer 1

CSS will let you do this easily. Something like the following:
#footer {
background-color: #b0c4de;
width: 50%;
height: 20px;
float: right;
}
This is a pretty good resource: http://www.w3schools.com/css/default.asp

Answer 2

Can´t you just use css background-image of the body to achieve that effect?

Answer 3

You can do this by wrapping the footer div in another div. This will not only allow you to fully position the footer div but it will also allow you to put the footer div outside without generating a scrollbar or showing the overflow.
For example:
<div id="footer-wrapper">
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
</div>
#footer-wrapper { width:300px; height:100px; position:relative; overflow:hidden; }
#footer { position:absolute: top:50px; left:50%; width:300px; }
etc.
The position:relative means that the footer div, with position:absolute, will use the wrapper as the position reference. Overflow:hidden will prevent scroll bars and will hide the overflow.

Answer 4

You can do something like that :
#footer {
float: right;
width: 50%;
background-color: blue;
overflow: hidden;
}​
The overflow hidden isn't necessary but in case a scrollbar appears, with this it won't.
EDIT: example: http://jsfiddle.net/8nu68/