css container query

[Tom]

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

 

[GD]

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>

 

[Richard]

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;".

 

[Tom]

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...