CSS trick

Hello there CSS experts

I have this error which i know has a pretty popular fix, but i forgot it(since i haven’t used html/css in a long long time :D)

I am using a floating div object, with a repeated background. But the background repeats only where i have content. I need the background to repeat in the whole div/column. See the left column in this screenshot :



The code that i use to format the right column is this :
.bg_layoutMiddleRight { background-image: url( "../assets/images/middle_left.png" ); background-position: right top; background-repeat:repeat-y; padding-top: 30px; width:250px; float:left; padding-left:10px; border-left:1px dotted #9a8b74; }
The left and right columns are both floating in another container.

Can anyone help me with this?

Thanks,
Ruben

Try using one big background (with a small height, but repeating downwards) on your container instead.

i am using a small repeated background if you use repeated backgrounds in a floating container, the background will repeat only where you have content. This is the rule but there is a way around this, i just can’t remember it, and since i can’t remember it i can’t search for the solution on Google

i am using a small repeated background if you use repeated backgrounds in a floating container, the background will repeat only where you have content. This is the rule but there is a way around this, i just can’t remember it, and since i can’t remember it i can’t search for the solution on Google

No, what he meant was instead of using the repeated background on the floated element, use a FULL repeated background on the container element behind the float, and then you just clear the float after all of your content and it will all line up pretty-like.

<div class="clear"></div>

.clear { clear:both; }

I promise, it’ll work like a charm

If you need help, just send me an message and I’ll help you out.

Sorry what I meant was:

From your screenshot, it seems you have a background on each of your columns. What I’m suggesting is to combine those two backgrounds into one long one and apply it to the container.

That way (unless you’re not using a fixed width container), the background will repeat to the bottom. Like this

Sorry if I’m not understanding the problem correctly.

jscheetz has the right anwser for ya…

Oh…i understand the answer now
I’ll try to see if it works. Basically i understand the solution and i should be able to make it …

and yes!! it worked thanks guys .. you were great I definitely know where to come in the feature when i need help

I’m not sure I agree with jscheetz (sorry dude). If you do it like that you’re relying on an empty element for no other reason than to clear floats. It’s just my opinion obviously but I was always told never to do it like that.

Instead if I understand your problem correctly, you have some floats and the containing element collapses when it has no content, destroying your repeated background.

The way to make the containing element expand around the floated div’s (and hence the background as well) is to also float the container (left or right depends on the rest of your template). Then use a clear: both; css command on the footer of your template, or something underneath that contains content, not an empty element.

Just my way of doing things, to have a different perspective on it.

Or you can use:

overflow: hidden;

to the container with float elements inside (thanks to that CSS post on NETTUTS for this!)