Hi guys, Can anyone explain how does this work? For example, if you go to http://www.joomla.com their template is 800 px wide, but when you switch to full screen it seems like the template expands to 1024px.... So the question is, how do I create a table which is higher or equal to 800 and less than 1024? Using CSS only! Thank you very much in advance.
Try using min-width: 800px; although this doesnt work in IE6 and below, so you'll need some javascript to fix that.
This is usually how I declare that in my CSS - assuming #container is your containing div. * { margin:0; padding:0; } body { text-align:center; padding:8px; } #container { min-width:750px; max-width:976px; text-align:left; margin:0 auto; } /* the following gives us min/max width in lte IE6 using all greater than compares avoids the 'less than' bug which can hang IE */ * html #container { width:750px; /* if scripting is off, fix the width to 800 friendly */ width:expression( (document.body.clientWidth>992) ? "976px" : ((document.body.clientWidth>766) ? "auto" : "750px") ); height:1%; /* haslayout */ } Code (markup): You'll notice the compares have 16px added to them, this 'safety margin' compensates for the 8px padding on the body. The haslayout makes certain that IE actually re-runs the expression when the screen size changes. From that point on just write everything inside #container as if it were a normal fluidic layout. Usually I write all my pages as fully fluid even if the target it going to be fixed width... A> I actually find it simpler and less code. B> if in the future you want to switch to fluid or semi-fluid, it's changing a few lines of CSS not scrapping the whole layout and starting over.
Deathshadow, is there anyway you could briefly explain what this part of your CSS file does, and how it works, or post a link to a resource where I can read up on this? I have never seen CSS like this, and I would like to learn more.
^ It's some proprietary IE property. Googling "expression property css" might lead you to this site: http://www.svendtofte.com/code/max_width_in_ie/
As soulscratch mentioned, 'expression' is an IE only property to let you run javascript inside your CSS. It evaluates much akin to how you'd use inline evaluations. Basically, the format used in this case is: (boolean expression) ? "true" : "false" The ? is kind of like an if statement, the value between the ? and : is the true condition, the one after is the false. So basically, if document.body.clientWidth (aka browser width) is greater than 992 pixels, make the page 976px wide (accounting for the padding on body) - if it's not, we check if that value is greater than 766px - if so we want the layout to be dynamic - aka width:auto, otherwise we want that 750px number. Expressions are really powerful - and in a number of cases I wish they were available in all browsers, not just IE... but because it's IE only it is best reserved for implementing 'fixes' or 'workarounds' for CSS elements that are missing in older IE versions (like min-width and max-width). You also need to remember that javascript might not be available, and include a fallback condition. That width:750px before the expression is replaced if the javascript runs - if the javascript fails to run, the value already set is used. The 'haslayout' hack is needed to make sure that IE updates the box when the screen is resized. Several hundred pages wouldn't even begin to cover what haslayout is, but usually if IE is not resizing a box or even sizing a box correctly in the first place, adding haslayout will straighten it out. This page: http://www.satzansatz.de/cssd/onhavinglayout.html explains that part fairly well. Oh, and GREAT care needs to be taken using less than and greater than in the same expression on the same DOM object - for some reason less than compares can often lock up IE solid, which is why I worded the routine to only use greater than.