Nested div placement, Background images, etc

Hi Experts,

I am just pulling my hair out over this problem. I want to have a box that expands all directions. For the life of me, I can't get the bottom bar to work properly. Here is my CSS.

#content {
      height: 250px;
      width: 65%;
      float: left;
      margin-top: 15px;
      margin-left: 30px;
      background-image: url(images/PageFiles/Content_TopBar.jpg);
      background-repeat: repeat-x;
}

#leftBar {
      height: 100%;
      width: 63px;
      float: left;
      background-image: url(images/PageFiles/Content_LeftSide_Bar.jpg);
      background-repeat: repeat-y;
      z-index: 4;
}
#rightBar {
      height: 100%;
      width: 63px;
      float: right;
      background-image: url(images/PageFiles/Content_RightSide_Bar.jpg);
      background-repeat: repeat-y;
      background-position: 20px;
      z-index: 2;
}

<body>
<div id="header"><br>
<img src="images/PageFiles/Title_HP.gif" alt="Glasstoration Technologies" width="500" height="43" class="logo"></div>

<div id="sidebar">
<img src="images/PageFiles/Navbar_Top.jpg" width="212" height="87"><br>
<img src="images/PageFiles/Navbar_Bottom.jpg" width="212" height="66"></div>

<div id="content">
      <div id="leftBar"><img src="images/PageFiles/Content_TopLeft.jpg" width="63" height="81"></div>
      <div id="rightBar"><img src="images/PageFiles/Content_TopRight.jpg" width="63" height="81"></div>
</div>


Which generates this right here just perfectly.  http://www.thinkwelldesigns.com/graphics/Glassbox.jpg

The box expands lengthwise as I want it to. I just want to be able to next another dive in the Content Div, place it on TOP of the box sidebars and aligned at the bottom of the Content div.

And for the life of me, I can't do it.

Your help appreciated.
LVL 9
thinkwelldesignsAsked:
Who is Participating?
 
Pierre CorneliusCommented:
Try the following changes:

#container {
     height: 250px;
     width: 65%;
}

#content {
     height: 100%;
     width: 100%;
     float: left;
     margin-top: 15px;
     margin-left: 30px;
     background-image: url(Content_TopBar.jpg);
     background-repeat: repeat-x;
}

#leftBar {
     height: 100%;
     width: 32px;
     float: left;
     background-image: url(Content_LeftSide_Bar.jpg);
     background-repeat: repeat-y;
     z-index: 4;
}
#rightBar {
     height: 100%;
     width: 32px;
     float: right;
     background-image: url(Content_RightSide_Bar.jpg);
     background-repeat: repeat-y;
     background-position: 0px;
     z-index: 2;
}

#BottomBar {
     height: 32px;
     width: 100%;
     float: left;
     margin-top: 0px;
     margin-left: 30px;
     background-image: url(Content_BottomBar.jpg);
     background-repeat: repeat-x;
}



<html>
<head>
      <link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
<div id="header"><br>
      <img src="Title_HP.gif" alt="Glasstoration Technologies" width="500" height="43" class="logo">
</div>

<div id="sidebar">
      <img src="Navbar_Top.jpg" width="212" height="87"><br>
      <img src="Navbar_Bottom.jpg" width="212" height="66"></div>

<div id="container">
      <div id="content">
           <div id="leftBar"><img src="Content_TopLeft.jpg" width="32" height="32"></div>
           <div id="rightBar"><img src="Content_TopRight.jpg" width="32" height="32"></div>
      </div>
      <div id="BottomBar">
           <div id="leftBar"><img src="Content_BottomLeft.jpg" width="32" height="32"></div>
           <div id="rightBar"><img src="Content_BottomRight.jpg" width="32" height="32"></div>
      </div>
</div>

</div>
</body>
</html>


regards
Pierre
0
 
Pierre CorneliusCommented:
note: I removed your image paths when I was testing on my side. You will have to add them again (i.e. "images/PageFiles/...")
0
 
thinkwelldesignsAuthor Commented:
I totally missed this. Very sorry. It annoys me when people forget questions I answer. Apologies to you, PierreC.
0
 
Pierre CorneliusCommented:
No problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.