Question

I want to create 3 horizontal bars that will sit at the top of a page.

What I’m trying to achieve is to get the bars to sit from the edge of the screen to about 75% of the width of the page.

The top bar is aligned right, the middle bar aligned left and the bottom bar aligned right again.

I would like to get the bars so that they overlap each other in the middle (by about 25% – hence the 75% width) of the page, but if the window is then resized the bars need to stay static in the middle of the page, but stretch so they resize to keep aligned to the very edge of the page.

I have an example of the initial setup here: http://jsfiddle.net/headshot_harry/LsNby/2/

But as you can see, the bars stay aligned to the edge of the page when the window is resized, but they are not static in the middle. I need them to resize or “stretch” whilst keeping the overlap in the middle of the screen intact.

Code below:

HTML

<div id="headerBar1"></div>
<div id="gap"></div>
<div id="headerBar2"></div>
<div id="gap"></div>
<div id="headerBar3"></div>
<div id="content"></div>​

CSS

#gap {
    width: 100px;
    height: 3px;
    border: 0px solid black;
}

#content {
    width: 600px;
    margin: 10px auto;
    background: #ccc;
    border: 1px solid black;
    height: 100px
}

#headerBar1 {
    height: 40px;
    background: blue;
    width: 400px;
    margin-left: auto;
}
#headerBar2 {
    height: 40px;
    background: blue;
    width: 400px;
}

#headerBar3 {
    height: 40px;
    background: blue;
    width: 400px;
    margin-left: auto;
}

​

Answer 1

I think you need to use % instead of px

http://jsfiddle.net/headshot_harry/LsNby/2/