Question

I’d like to create an infinite horizontal div. However, I have no idea about how to do it.

Can someone help me to do it using this code as a start point?

Please, take a look at this image to understand how this infinite horizontal div should be.

Thank you!

Answer 1

By “infinite” i am assuming you mean to the end of the wiewport/window. You could try an absolutely positioned element;

this will be an overlay, appearing on top of anything in normal document flow

html

<div id="line">&nbsp;</div>

css

#line {
    position: absolute;
    right: 0;
    margin-left: 100px;
    left: 50%; /* seeing as content is centered, make margin-left start at center of page */
    bottom: 10%;
    height: 20px;
    background-color: red;
}

Demo at: http://jsfiddle.net/PstWc/2/