CSS help

[mwallace]

Hi Everyone, i'm working on a small site for a friend, but something is making one of my images choke in the CSS. The image is the wrapper image which should repeat down the page, but for whatever reason it stops after mayb 80px or so. The CSS and the html validate, but i just can't figure out what's wrong. I've only been working on this for an hour or two so i haven't cleaned up the code, but can anyone help me find out why its not repeating?

the link is:
The css is:

#wrapper {
margin: 40px auto;
width: 820px;
background: #a4a675 url(../images/BKG_wrapper.gif) repeat-y top center;
}

and here's the image:

Any help would be greatly appreciated.

Thanks,

Matt

[edited by: jatar_k at 5:48 pm (utc) on Nov. 30, 2006]
[edit reason] no urls thanks [/edit]

[Fotiman]

Personal URLs are not permitted. Please see the TOS link at the bottom of the page.

However, your problem is that you have in your content 3 floated boxes ("col1", "col2", and "col3"). Floating something takes it out of the flow, thus your #wrapper doesn't contain these boxes.

The easy fix is to add something below your floats and give it clearance. For example:

<br class="endOfContent">

And then:

.endOfContent { clear: both; }

Alternatively, you could also float the wrapper, but then centering becomes more challenging and you might need yet another wrapper.

Also, names like "col1" are not really very good class names. What if you later decided that you wanted col1 to appear on the right?

Hope that helps.