Question

I am trying to achieve a dashed (custom) bored along the left and right of a 1000px fixed width page.

The left one is fine, this works a treat:

#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

However when I do it over on the right hand side, it wont quite work. I need it to relatively position to the right of the 1000px rather than of the window.

#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

Parent element:

#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}

That does not work. Can I achieve this? I need it to essentially float: right (but then i cannot make the height 100% of the browser window). Thanks

Answer 1

Demo: http://jsfiddle.net/iambriansreed/sAhmc/

Removed the floats on absolute elements. Added absolute position to parent and centered using left and margin. Removed unneeded margin-top on right border. Replaced border id’s with classes.

Borders sit outside the 1000px width.

#container>.border{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-image: url('../img/border.gif');
    background-repeat:repeat-y;
}
#container>.border.left{
    left: -5px;
    background-color: red; /* demo */
}
#container>.border.right{
    right: -5px;
    background-color: blue; /* demo */
}
#container{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* demo */
    left: 50%;
    margin-left: -50px; /* half of width */
    text-align: left;
    padding-top: 90px;
    overflow: visible;
    background: #eee; /* demo */
}​