Problem with Div, border and image in border

Good Morning,  I'm having a problem with my css.

I am setting up a page, that has a border. I have 3 sections of the page.  In each section, I need to display an image in the bordered area.  Right now the image seems positioned correctly, but appears to be behind the border.

Can someone point me in the right direction. I'm attaching an image of what I am trying to duplicate.

-----------------------------------------Current CSS

div.bigdata {
  width:675px;
  border-left-style:solid;
  border-left-color:#c2b38f;
  border-width:40px;
  font:13px arial,sans-serif;
      position:relative;
      z-index: 150;

}
div.side{
width:675px;
background-image:url('bigData_sidelabel_collaboration.jpg');
background-repeat:no-repeat;
margin-left: -40px;
position:absolute;
z-index: 100;
}

div.bigcontent {
  width:671px;
  border-left-style:solid;
  border-left-color:#00713b;
  border-width:4px;
  font:13px arial,sans-serif;

  background:#ccccff;

}
johnson_sfAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
bigdata has a z-index of 150 ... that includes the border.  The element with the image has a z-index of 100 the higher z-Index will always be on top of the lower z-index.


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Anuradha GoliSystems Development / Support SpecialistCommented:
Can you just attach the html and css you are working so that I can try to sort out
0
johnson_sfAuthor Commented:
Sorry for the delay. I thought I'd attached an Image but I don't see it now.  I'll try again


---------------------------------------------------------------------------------
<style type="text/css">
div.bigdata {
  width:675px;
  border-left-style:solid;
  border-left-color:#c2b38f;
  border-width:40px;
  font:13px arial,sans-serif;
    position:relative;
    z-index: 100;
}
div.container{

margin-right:10px;

}
div.side{
width:675px;
background-image:url('collaboration.jpg');
background-repeat:no-repeat;
margin-left: -40px;
position:absolute;
z-index: 150;
}
div.heading{
background:#999999;
}

div.bigcontent {
  width:671px;
  border-left-style:solid;
  border-left-color:#00713b;
  border-width:4px;
  font:13px arial,sans-serif;

  background:#ccccff;

}

div.text{
margin-left:10px;
margin-right:10px;
}
div.spacer{
width:650px;
background:#ffffcc;
margin-left:12px;
margin-top:12px;
}

div.more{
position:relative;
left:550px;
}

div.bigimage {
    width:671px;
  margin-left: -4px;

}</style>
<div class="bigdata">
<!--Start of sectionzero  -->
  <div class="container">
            <div class="side">&nbsp;&nbsp;</div>
            <div class="heading"><img src="off_0.jpg" ">
                  <div class="spacer">
                        Blah blah blah
                        <div class="more"><img src="more_0.jpg"></div>
                  </div>
            </div>
            <div class="bigcontent">
                  <div class="bigimage">
                        <p><img src="data_on.jpg"></p>
                  </div>
                  <div class="text">
                        <p><img src="data.jpg"></p>
                        blah blah
                  </div>
                  <br>
                  <img alt="" src="infographic.jpg"><br>
                  <br>
                  <br>
                  <div class="more"><img src="close_0.jpg"></div>
                  <br>
                  &nbsp;</div>
  </div>
      <!--End of section zero  -->
</div>

-------------------------------------
0
johnson_sfAuthor Commented:
Here is the image
sample.jpg
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.