We help IT Professionals succeed at work.

Nested div placement, Background images, etc

thinkwelldesigns
on
Medium Priority
2,514 Views
Last Modified: 2010-05-19
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.
Comment
Watch Question

CERTIFIED EXPERT
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT

Commented:
note: I removed your image paths when I was testing on my side. You will have to add them again (i.e. "images/PageFiles/...")

Author

Commented:
I totally missed this. Very sorry. It annoys me when people forget questions I answer. Apologies to you, PierreC.
CERTIFIED EXPERT

Commented:
No problem.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.