The background image is covering half the width of the red/blue divs and I can’t separate them. How do I do that?
What are you actually trying to do there? It’s not clear what layout you are aiming for.
I’m just trying to get the red/blue divs to float against the div with the repeating background image. I thought floating everything to the left would work but no go. How do I get the red/blue divs completely to the left of the div with the repeating background image?
I’d like to completely use float. Is that possible?
How do I get the red/blue divs completely to the left of the div with the repeating background image?
To the left or to the right? I assumed you wanted the div with the bg image to the left.
Indeed, that’s the way to do it. At the moment, the div with bg is position:absolute, which takes it out of the document flow. If you remove that and set all divs to float: left, they won’t overlap. The div with the bg will sit left and the other two divs will sit to the right of that. You’ll also have to set a height on the div with the bg image.
Hoever, in general, this is not a good method for layout. If you are going to have columns, wrap each column in a div so that everything in the column stays together.
I understand.
When I float everything to the left, #left_bg disappears. Firebug says it’s not there.
at least position:absolute; makes #left_bg appear.
I guess I could use margin: 0px 0px 0px 200px; but that seems like cheating, but maybe it’s the point of this exercise.
As in :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {width:650px; min-height: 400px; float left;}
#left_bg {width:200px; position:absolute; left:0; top:0; height:100%; background: url(lincoln-nebraska-street.jpg) repeat-y left top;}
</style>
</head>
<body>
<div id="wrapper">
<div id="left_bg"></div>
<div style="height:200px;width:400px;background:red;margin: 0px 0px 0px 200px;"></div>
<div style="height:200px;width:400px;background:blue;float left;"></div>
<div style="height:200px;width:400px;background:red;float left;"></div>
<div style="height:200px;width:400px;background:blue;float left;"></div>
<!-- all other html in here -->
</div>
</body>
</html>
I mentioned above that you’ll need to give left_bg a height, as otherwise it has not height as it has no actual content. I don’t really like having empty divs just for a bg image, personally. There is probably a better way, depending on the overall design. for example, a wrapper div for the whole lot might have left padding for the background image to sit in.
Agreed.
I’m just investigating why some declarations work the way they do.
Back on point, doesn’t height:100% in #left_bg mean #left_bg 's height is inherited from #wrapper ?
My objective is to get a background repeat in #left_bg equal to the height of #wrapper.
No, unfortunately height: 100% is a misleading concept. It only works if the container (in this case the wrapper) has a defined height (such as in pixels) which isn’t very practical. You would have to set a height on the left_bg div of something like 800px. But that’s not a very nice thing to have to do. that’s why I’d think differently about constructing the layout. Don’t have a div just for a background image.
Then my I’m back where I started.
How do I get an image in the div that uses #left_bg to repeat to a height equal to the height of the div that uses #wrapper?
If I’m understanding rightly, I would suggest you place the background on the wrapper itself, give the wrapper a left padding of 200px, set the background image to repeat-y and crop the background image to a width of 200px. (I don’t see the point of having the image wider than 200px if you only want to see the left site of it.
Almost there except no repeat.
Why do you think it’s not repeating?
Current code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {width:200px; position:absolute; left:0; top:0; height:100%; background: url(lincoln-nebraska-street.jpg) repeat-y left top;padding-left:200px;}
</style>
</head>
<body>
<div id="wrapper">
<div style="height:200px;width:400px;background:red;"></div>
<div style="height:200px;width:400px;background:blue;"></div>
<div style="height:200px;width:400px;background:red;"></div>
<div style="height:200px;width:400px;background:blue;"></div>
</div>
</body>
</html>
Looks like it should repeat, but it’s hard to tell. Would you mind updating the page you linked to above so we can see this live? Then it’s easy to tell what’s going on. 
OK, cool. The image is repeating, though, so are you happy with it now, or is there still an issue?
It’s the image that’s not repeating.
It is repeating, though. It’s just going down the side, because of repeat-y. If you want it to repeat across the whole page, you’ll have to remove the repeat-y, the width and the position: absolute;
Edit:
Hm, you may not see that the image is repeating if your screen is not very tall, but on my large screen, the image repeats at least twice, as it is quite tall. But on a small screen, 100% height is not all that tall.
Is this what you are seeking?
i think I see the problem.
The image IS repeating, but you don’t see ti because the container is not tall enough.
try this:
html, body{height:100%;}
#wrapper{min-height:100%}
Thank-you.
Any idea why it’s not repeating to the bottom of the last blue div?
It’s repeating to the bottom of the page for me. Do you want it only to go as far as the last blue div? You need to be really clear about what you want to see here, as it’s still not very clear. If we know exactly what you want to see on the page, we can just tell you how to do it.