Question

I am having a bit of an issue here… I have a Div and its called leftSideBar and inside it has two images, a top and a bottom and this div has a repeat-y background. It did have a min-height but I used jquery to get the height of my content div like so…

$(document).ready(function() {
var div_height = $("#content").height();
$(".leftSideBar").css("height", div_height);

var div_height = $("#content").height();
$(".rightSideBar").css("height", div_height);
});

What I am trying to do is have the top image at the top of the div and the bottom image at the bottom of the div…here is the HTML…

<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--leftSideBar-->

<div class="content" id="content"></div><!--content-->

<div class="rightSideBar">
<img src="images/rightSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--rightSideBar-->

and the CSS

.leftSideBar{
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
}

.rightSideBar{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
    margin-top: -49px;
    width:174px;
}

.content{
    background:#FFF;
    width: 992px;
    position:relative;
    min-height: 591px;
    float:left;
    margin: -48px auto 0;
    font-size:13px;
}

Any help or a point in the right direction would be awesome! Thanks!

Answer 1

Since it appears you’re using static widths, you should be able to just make your IMG elements block and position: absolute and align them top/bottom.

.img-side{
    display:block;
    position:absolute;
    left:0;
    top:0; /* we'll use top as a default*/
}
.img-side.bottom{
    top:auto; /* might need this, I'm not sure. */
    bottom:0;
}

for you HTML just add the classes:

<img class="img-side" ... />
<img class="img-side bottom" ... />

If you plan on having content in your sidebars, you’ll want to add the appropriate padding to the top/bottom of the sidebar so your content doesn’t flow over your image (unless that’s the design).

UPDATE

One side note, you have to make your sidebars position:relative so your IMG elements use it for positioning. You might update your CSS to be a little more like this:

.sideBar{ /* left will be default */
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
    position:relative;
}

.sideBar.right{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
}