css container query

Hi
I want to have a container around 2 columns with a background image. In IE
the container expands depending on the content but in Mozilla I seem to have
to specify the height of the div to be able to see it... you will notice
that it looks ok in IE but the background image is not showing in Mozilla
I have done similar before and it worked fine but there seems to be a
problem now.
Link is http://www.lightbox.ie/test/
If anyone had any thoughts it would be great... basically I want the div
with id of mcc to expand as the divs leftcontent and rightcontent expand...
Thanks in advance
Tom

Tom

Tom <> wrote:
> I want to have a container around 2 columns with a background image.

If you've floated the left and right columns then the containing block
will collapse to fit the remaining content. If the floated columns are
the only thing in the container then it will collapse to zero-height.

To make it expand to fit the floated columns you need to put something
after them and use the CSS clear property (its values can be 'left',
'right' or 'both'). Example:


<div style="border:black solid 1px;">
<p style="float:left; width:50%;">Floated left</p>
<p style="float:right; width:50%;">Floated right</p>
<p style="clear:both;><a href="#top">Back to top of page</a></p>
</div>

Tom wrote:

> Hi
> I want to have a container around 2 columns with a background image. In
> IE the container expands depending on the content but in Mozilla I seem
> to have to specify the height of the div to be able to see it... you will
> notice that it looks ok in IE but the background image is not showing in
> Mozilla I have done similar before and it worked fine but there seems to
> be a problem now.
> Link is http://www.lightbox.ie/test/
> If anyone had any thoughts it would be great... basically I want the div
> with id of mcc to expand as the divs leftcontent and rightcontent
> expand... Thanks in advance
> Tom


Try my solution. http://1-large-world.com/samples/sample1.html
http://1-large-world.com/samples/sample2.html

Place your menu links inside the "header" division as well as your banner.
Use the "sidebar" division as desired.
Or not at all and add your graphics into another division using
"float:left;".

> If you've floated the left and right columns then the containing block
> will collapse to fit the remaining content. If the floated columns are
> the only thing in the container then it will collapse to zero-height.
>
> To make it expand to fit the floated columns you need to put something
> after them and use the CSS clear property (its values can be 'left',
> 'right' or 'both'). Example:
>

Thanks
That sorts it out... had problems with the clear properties before...