Date: 01/22/06 (Web Development)    Keywords: css

No, it's not done. No, I didn't pick out the purple, the owner did.
On this page I have 8 horizontal divs. I want to put a graphic on the end of each one that fades the color out to white, but whenever I add a graphic to a div that already contains a pic (like the top banner one) the end pic makes the div expand vertically. I've tried right align, floating, and changing the CSS so the purple isn't a repeating graphic but the actual color. WTF?

#banner
{
background: #E3DBFE;
background-repeat: repeat-x;
height: 120px;
width: 100%;
padding: 0px;
}
#line
{
background-image: url(/images/line_repeat.gif);
background-repeat: repeat-x;
height: 10px;
width: 100%;
padding: 0px;
}
#pics
{
background-image: url(/images/pics_repeat.gif);
background-repeat: repeat-x;
height: 150px;
width: 100%;
padding: 0px;
border-bottom:1px solid #E3DBFE;
}
#button
{
background-image: url(/images/button_repeat.gif);
background-repeat: repeat-x;
height: 35px;
width: 100%;
padding: 0px;
}
#curve
{
background-image: url(/images/curve_repeat.gif);
background-repeat: repeat-x;
height: 35px;
width: 100%;
padding: 0px;

}
#side
{
background-image: url(/images/side_y.gif);
background-repeat: repeat-y;
width: 5%;
height: 90%
padding: 0px;
}
#main
{
background-image: url(/images/side_y.gif);
background-repeat: repeat-y;
overflow: auto;
width: 100%;
height: 90%
font-size: 12px;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
padding-bottom: 10px;
}

#bottomline
{
background-image: url(/images/line_repeat.gif);
background-repeat: repeat-x;
height: 10px;
width: 100%;
padding: 0px;
}
#copy
{
background: #fff;
height: 25px;
width: 100%;
padding: 0px;
}
a:link
{
color: #800000;
text-decoration: none
}
a:visited
{
color: #800000;
text-decoration: none
}
a:active
{
color: #80000;
text-decoration: none
}
a:hover
{
color: #808080;
text-decoration: underline
}
body
{
align: center;
text-align: left;
background: #fff;
scrollbar-base-color: #808080;
scrollbar-arrow-color: #000;
scrollbar-face-color: #E3DBFE;
scrollbar-highlight-color: #E3DBFE;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: #808080;
scrollbar-shadow-color: #000;
}

Source: http://community.livejournal.com/webdev/286718.html