Adding more than 1 absolute positioned element breaks css

Question

I want to create a page that has 3 wide lines/bars running vertically down the page. These are to be spread evenly over the page to create the effect of prison bars running down the page. This will cover some of the content but will be removed later using jquery.

I've created 3 bars using divs with ids set widths and heights and used absolute positioning for each. My understanding is that as these elements are positioned absolutely they will be out of the flow of the document and not effect the surrounding elements. This works well when I add 1 bar vertically to the page but as soon as I try to add another bar the css breaks?

Any idea on why this doesn't work with more than 1 bar and how I can fix it ?

Thanks in advance

The code is below:

Html:

<div id="header">

<div class="middle-section">


      <ul id="main-links">
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
        <li><a href="#section-three">Section Three</a></li>
        <li><a href="#section-four">Section Four</a></li>
            <li><a href="#section-five">Section five</a></li>
      </ul>

      <div id="bar1">

      <div id="bar2">

      <div id="bar3">

   </div>

</div> <!--end of header -->




<div id="page-content"> 

CSS:

.middle-section
{
 width:1000px;
 position:relative;
 margin:0 auto;
}

#header
{
 background:#fff;
 color:#666;
}

#header .middle-section
{
 position: relative;
 min-height:100px;
 background:#f7f7f7;
 border-bottom: 1px solid #666;
}

div#bar1 {
position:absolute;
top:0;
left:200px;
width:133px;
height: 1000px;
background-color: #f00;
z-index: 99;
}

div#bar2 {
position:absolute;
 top:0;
 left:400px;
 width:133px;
 height: 1000px;
 background-color: #f00;
 z-index: 99;
}

div#bar3 {
 position:absolute;
 top:0;
 left:600px;
 width:133px;
 height: 2000px;
 background-color: #f00;
 z-index: 99;
 }

Answer 1

You need to close div of each bar div and here is updated jsbin