• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2487
  • Last Modified:

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.
0
thinkwelldesigns
Asked:
thinkwelldesigns
  • 3
1 Solution
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now