I am putting together a sidebar box for a friend of mine. I've sliced up the images to be used in the box for my friend wanted the inner text images to be links to different pages. You can view the box in progress here.

 

Below is the CSS I wrote for the divs and the divs themselves:

 

#container {
width: 261px;
margin: auto;
}

#top {
height: 82px;
margin: auto;
}

#leftside {
float: left;
width: 35px;
background: url(/img/buttonleft.gif) no-repeat;
height: 229px;
margin: auto;
}

#rightside {
float: right;
width: 35px;
background: url(/img/buttonright.gif) no-repeat;
height: 229px;
margin: auto;
}

#content {
margin: auto;
}

#footer {
clear: both;
height: 42px;
margin: auto;
}

 

<div id="container">
<div id="top"><img alt="Ads and Buttons" border="0" width="261" src="/img/buttonheader.gif" height="82" title="Ads and Buttons"/></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div id="content">
<a href=""></img/designbutton.gif"></a>
<a href=""></img/makemyad.gif"></a>
<a href=""></img/resizemyad.gif"></a>
<a href=""></img/howtograb.gif"></a>
<a href=""></img/grabwpcom.gif"></a>
<a href=""></img/oneclick.gif"></a>
<a href=""></img/otheruses.gif"></a>
</div>
<div id="footer"><img border="0" width="261" src="/img/buttonbottom.gif" height="42"></div>
</div>

 

If you look at the box on the page I linked to above you'll see that everything seems to be working fine except for the bottom piece. For some reason I have a small gap above the footer image and it extends way out to the right.

 

I'm not a coder so if you have any suggestions or know of a better way to implement this please let me know.

 

Thanks.

your using footer id twice on the page if you rename the bottom of your buttons footer and change the css to match

 

also add height:229px; to #content

your using footer id twice on the page if you rename the bottom of your buttons footer and change the css to match

 

also add height:229px; to #content

 

mteam, thank you for your reply. I don't see where I'm using 'footer' twice (?), but the height worked on the content area.

 

Thanks

Ah, nevermind. I understand what you meant now - there was more than one 'footer' id in the stylesheet. Got it!

 

Thanks a lot