hi gurus, I have a question regarding a layout for my new design.. its a kind of half elastic and half fixed width my maximum width is 960px for (1024*768 or more resolution) my minimum width to be 745px the problem is with resolutions greater than 1024*768 - the layout grows- it should not grow than 960px otherthan header which is 100% at the same time it should fit for 800*600 so that the layout doesnt collapse can anyone gelp me out this <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <style type="text/css"> #header{ border:1px solid #000; width:100%; } #left{ width:160px; border:1px solid #000; float:left; } #container{ border:1px solid #000; padding-right:160px; width:57%; /*my desired width is like 65%*/ float:left; } #content{ border:1px solid red; float:left; margin:0 20px; } #right{ border:1px solid blue; float:left; width:160px; margin-right:-162px; } </style> </head> <body> <div id="header"> <h1>header</h1> </div> <div id="left"> <p>left</p> </div> <div id="container"> <div id="content"> Content </div> <div id="right"> <p>right</p> </div> </div> </body> </html> Code (markup):
I guess you have tried min-width: and max:width rules for the relevant rules? A great trick from the old days, which isn't used much anymore: Use a picture spacer. Make a 1px transparent gif and then use width and height to set how big the container should be. Regular pictures are also great for creating a minimum width You could also just enclose what you have now in another div and space that accordingly. You should also consider people using other screen resolutions (I, for example, use 1440 x 900px). So setting 100% is not always the best option. I prefer to set one div as a fixed px width, then set the rest from that.