Css Layout Technique 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'll try and help on this one. I'm not a "guru" so here is my version of it. I don't quite understand which area you wanted for the elastic part (container?) but I attempted to do what I think you were asking. <!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"> * { margin: 0; padding: 0; } body { text-align: center; } #header, #container { text-align: left; } #header { width: 100%; } #container { margin: auto; width: 100%; min-width: 745px; max-width: 960px; } #left { width: 160px; float: left; } #right { background: blue; padding: 0 0 0 160px; } #sidebar { width: 160px; float: right; background: red; } #content { padding: 0 160px 0 0; } </style> </head> <body> <div id="header"> <h1>header</h1> </div> <div id="container"> <div id="left"> <p>left</p> </div> <div id="right"> <div id="sidebar"> sidebar </div> <div id="content"> content content content content content content content content content content content content content content content content </div> </div> </div> </body> </html> Code (markup): However, I only tested this in Firefox. I am very sure that it probably will need some tweaking in other browsers (example: IE) because I don't think IE understands "max-width" and "min-width". But it was my attempt. I hope it helps.
I'd do what abcdfGARY did, except I wouldn't waste a line saying "width: 100%" because that's going to get overridden by the min and max widths (unless that's sitting in there for IE or something). IE6 can't see min and max width so the safe easy thing is, with gary's code: #container { margin:0 auto; min-width: 745px; max-width: 960px; } * html #container {width: 745px;} Code (markup): So, IE6 wouldn't stretch, but it would get a width declaration for Haslayout or whatever. Leaving the width: 100% in the top part would likely do the same, except you may not want IE6 to be 100% wide. There's also a CSS trick for min-width in IE6, and a CSS Expression (javascript in the CSS for IE only) you could use.