Forum Moderators: not2easy
Here is the issue:
I have 3 divs aligned side by side wrapped inside one larger div. Each of the side divs have a background image (as does the middle one). I need the background image in the side divs to repeat-y as the content in the middle div increases too, but for the life of me I cannot get the backgrounds on either of the side divs to expand.
Doctype Declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
CSS:
.vafta #main {
width: 1013px;
background: url(images/main-bg.jpg) repeat-x;
text-align: center;
min-height: 379px;
margin: 0 auto;
}
.vafta #main-left {
width: 7px;
float: left;
text-align: right;
background: url(images/shadow-left.png) repeat-y;
}
.vafta #main-content {
width: 979px;
float: left;
text-align: left;
background: url(images/main-content-bg.jpg) repeat-x;
min-height: 379px;
background-color: #292121;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
padding-top: 10px;
}
.vafta #main-right {
width: 7px;
float: right;
text-align: left;
background: url(images/shadow-right.png) repeat;
}
.vafta #clearfreak-2 {
clear: both;
}
Here is the html displaying the CSS:
<div id="main">
<div id="main-left">
</div>
<div id="main-content">
<p>This is the middle</p>
</div>
<div id="main-right">
</div>
<div id="clearfreak-2">
</div>
</div>
I'm not sure what I'm missing, but I believe it's quite obvious!
If the background IS appearing but not expanding, it could be to do with a height declaration. I've had issues with this in the past. Have you tried removing min-height from your centre and main divs at all?
Not sure if this will help, but I had a similar issue with alignment and it was all because I had declared a height on a wrapping div.
I've also made the repeat a repeat-y on #main-right, but no joy.
First, the problem is that the side divs are flat and somehow I can't get them to expand based on the middle div.
Apparently, there's really no good solution to doing this: the design is just too graphic rich with too many gradients. So, the solution is to use javascript to calculate the height of the middle div and then adjust both the sides.
Not ideal, as the person who wrote it said so, but the only way that it works. Here is what you do:
Step 1: Create a javascript function in the header.
<script type="text/javascript">
function doHeights( ets, teh ){
ets.style.height = teh.offsetHeight + "px";
}
So, this says, take div ets and resize it to div teh
Step 2: Then, after all my divs have been interpreted in the browser, this is what I entered:
<script type="text/javascript">
doHeights( document.getElementById( "main-left" ), document.getElementById( "main-content" ) );
doHeights( document.getElementById( "main-right" ), document.getElementById( "main-content" ) );
</script>
Hope that helps some other folks too.
Apparently, there's really no good solution to doing this: the design is just too graphic rich with too many gradients.
I admit that I have not looked at your issue, but don't believe that this is likely true - just needs more work. It sounds like a standard three column design that needs to be tweaked to get columns to rise (or fall as the case may be).
