how to add two widths to one class in css

Question

Hi All,

I want to use min-width and width for a class. Is that possible?

Can I use the following code :

.container
{

min-width:1000px;
width:100%;
height:100%;
overflow:hidden;
}

Thanks

Answer 1

Yes. Your code is valid. the .container element will take at least 1000px first and if there are more width available, then it will span to the entire width of the screen (due to width:100%)

Answer 2

Yes that code is fine. It means the container div will take up the full width of the browser, or 1000px, whichever is longest.

Answer 3

Using min-width and width on a single selector is fine, it's often the basis for most fluid layouts.

However, IE6 lacks support for the min-width property; instead, it interprets the "width" property as min-width, and will expand in width as wide as the non-breaking content it contains requires. But judging from your code, this won't help you because any content wider than 1000px is most likely to have breaks in it (spaces between words, etc.).

If you want this to work in IE6, you'll likely need to incorporate a javascript solution. Something along the lines of:

if(element.scrollWidth < 999) {
  element.style.width = 1000;
} else {
  element.style.width = "100%";
}

Note: My code is not simply a copy/paste solution, but rather a starting point for you to flesh out and apply to your specific need.

Answer 4

IE will not except min-width css property and your container's width will be equal to its parent container i.e. 100%. Although if you want to incorporate min-width property in IE then you need to handle your parent container over your .container element Here is the tutorial http://www.webreference.com/programming/min-width/