CSS Problem

[Viserov]

I'm having a slight problem with CSS and browser compatibility. Basically, I have a main div box and several sub-boxes. The main div box has a min-height of 100px (meaning that it will be at least 100px tall, unless the content inside the box causes it to stretch vertically), and there is a sub-DIV box that is floated to the left. This sub-DIV box I want to have a min-height as well, so there isn't a gap between this sub-box and the bottom of the main DIV box.

Here is the code that I am using. I am fairly new to CSS, so there may be more efficient ways of doing things. Can someone give me a pointer to how I can fix this design flaw?

<div style="width: 560px; min-height: 100px; border: 1px solid #000000; background: #ffffff; z-index: 1; padding: 0px">
	<div style="width: 100%; height: 20px; padding: 0px; margin: 0px; border-bottom: 1px solid #000000; background: #613520">
		&lt;div style="float: left; height: 20px; width: 20px; border-right: 1px solid #000000; margin: 0px"&gt;&lt;img src="https://www.venture50.com/downloads/images/icons/package.jpg"></div>lt;div style="width: 20px; height: 20px; float: left; border-right: 1px solid #000000; margin: 0px"&gt;&lt;img src="https://www.venture50.com/downloads/images/icons/food.jpg"></div>lt;div style="width: 350px; height: 20px; float: left; border-right: 1px solid #000000; margin: 0px; background: #a17e54; line-height:20px; padding-left: 3px"&gt;Business Name&lt;/div&gt;
		&lt;div style="width: 161px; height: 20px; float: left; margin: 0px; background: #613520; line-height:20px; padding-left: 3px"&gt;Business Type&lt;/div&gt;
	&lt;/div&gt;

	&lt;div style="width: 210px; z-index: 1; min-height: 79px; float: left;display: inline; background: #ebe2d9; border-right: 1px solid #000000"&gt;
		Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;
	&lt;/div&gt;
	Some more text to the right...

&lt;/div&gt;

How it looks in Firefox and Safari (not working right):

How it looks like in IE (how it is supposed to look):

Thanks!

[jackwanders]

i know there are issues with min-width in some browsers, but you should check out both

www.positioniseverything.net and

www.quirksmode.org

both sites have great info on browser compatibility in web design.

if your general goal however is just to have two columns of equal length, there are more effective ways to do so, with or without the use of 'faux columns'. Here's an ALA article:

http://www.alistapart.com/articles/fauxcolumns/

Avoiding faux columns means either using negative margins, as in this article:

http://positioniseverything.net/articles/o...out/equalheight

...or proper use of the 'height: 100%' rule. however, it would require you to know the height of the containing div, which i don't think you can in your case

[Pc_Madness]

Works for me in FireFox 1.5.

I had to remove, border-bottom:white etc.. from the second div to get the border working right.. otherwise all good. :\ (I don't have a doctype though, perhaps thats it?)

Otherwise... throw in some <br style="clear:both" />'s after some of your floats to see if that helps. (usually works, but I'm not quite sure why :p)