Need advice using CSS backgrounds

[logictrap]

What is the recommended way to create a content area with a background that fills in as the height expands?

I created a layout with a main container and specified a background color and a tiled image background.

Inside the main container I put several floated div's. In IE the background fills in but in Firefox it does not.

I found that putting a div at the bottom of the content area that has float set to none caused Firefox to fill in the background.

Is this the recommended way? It seems quirky to me.

The DOC TYPE is XHTML transitional.

[jessnoonyes]

Is the background declared for the main container, or for the divs? To get it to tile vertically you just put:

background-repeat: repeat-y; (or just "repeat" if you want it to repeat x and y)

[logictrap]

The background is specified in the main (outermost div) and is set to repeat both.


<div class="main-with-bg">
<div class="content-top-float-left">
Some Content
</div>
</div>

As I said, the background repeats in IE7 as the content get taller, but not in Firefox unless I add a div where float is set to none.

[_Aerospace_Eng_]

You need to clear your floats.
http://positioniseverything.net/easyclearing.html

[logictrap]

Thanks - for every seemingly simple problem there is a complex solution.

I keep forgetting to thank the standards committees for creating job security for me by making things that the average person can't do. ;-)