I am looking to create a centered two column layout with fixed-width
which has a background image
I am using a container div around a floating and non-floating div
My problem is that if I define the background image on the container
div and have it repeat vertically, it only repeats according to the
height of the non-floating div and if the floating div is longer than
the non-floating div, the background stops in the middle of the page!
Sometimes the left column may be longer, sometimes the right column
may be longer. How can I ensure that the background image will
continue for the length of the page?
Here is a mock-up of my code.
CSS is:
#wrapper {
background:url(images/template/main-background.jpg) repeat-y;
width:1000px;
margin-left: auto;
margin-right: auto;
}
#content-body {
margin-left: 35px;
width: 620px;
}
#sidebar {
float:right;
width: 280px;
padding-top: .5em;
padding-bottom: .5em;
}
HTML is:
<div wrapper>
<div id="sidebar">
</div id="sidebar">
<div id="content-body">
</div id="content-body">
</div wrapper>
P.S. I have also tried adding a footer with clear:both after the
content-body div within the wrapper. It appears correctly, but the
background on the wrapper still stops with the non-floating column.
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
