CSS min-width

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS min-width

Post by alex.barylski »

If it's one pet peeve I have with CSS...it's that when two DIVs which are emulating a 2 columns, one is fixed in width and the other fills in the gap...apparently the one with dynamic width gets pushed to the bottom of the other when the window is resized to a size smaller than the text in the dynamic width DIV will allow...

I've researched and found the min-width attribute, but apparently no browsers want to support this style???

uhhhgggg

I've read about a IE specific hack using dynamic CSS calculation...good idea in practice...I wish more implemented it...but it appears to be proprietary...

Anyone have any ideas of how to circumvent this issue?

I suppose using JS to prevent it from resizing might work...but is there another CSS hack or sometyhing?

Cheers :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Hi Hockey, indeed that's one of the big shortcomings of css support in IE. In the new IE7 there will be support for min/max width. Other modern browsers do support min/max-width/height fine.

There are 2 possible solutions in the current situation. The first is feeding IE it's own stylesheet and using width for IE instead of min-width. Because another bug of IE is the expanding box problem: IE will expand a box when the content doesn't fit. So in fact that works like a kind of min-width/min-height.
The other solution is to use the proprietary rules you mention. They are IE only, but if they are placed in the IE stylesheet I personally have no problems with it.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

matthijs is right, all modern browsers support it except IE as far as I know. He is also right that IE will treat width as min-width.
You can use this CSS hack which, by the way, I showed on these forums at least twice before:

Code: Select all

* html #element_id
{
	height: 500px;

	/*
	Since IE doesn't understand the min-width and
	min-height commands, but instead interprets width
	and height as min-width and min-height we use this
	css hack and in that way the above code will be read
	only by IE.
	*/
}



html>body #element_id
{
	min-height: 500px;

	/*
	On the other hand, this code will be read by all
	browsers but IE since IE doesn't understand the child
	selector command.
	*/
}
User avatar
gkwhitworth
Forum Commoner
Posts: 85
Joined: Tue Sep 05, 2006 8:28 pm
Location: Wasilla, Alaska

Post by gkwhitworth »

Yep that is what sucks about IE. Anyways....I thought I'd just say that almost 90% of America uses IE, since it comes with windows. So even though IE sucks, you should still try and cater to your users. Maybe even make two different stylesheets, one for Firefox and likewise browsers, and another for IE.

Now we know why Bill Gates retired.

--
Greg
Post Reply