BrianM
|
Depending on the object's placement and other CSS properties and inheritance (this works best with an overall "container" div with a unique id attribute), you can alternatively set the width property to auto (e.g., width=auto;) for the id's selector, for example:
.content
{
position: relative;
width: auto;
/* other CSS properties */
}
This lets the browswer resize the "container" (a div element generally, but applicable to any containing object that is positioned with CSS 2.1) dynamically based on the window object's innerWidth.
You can use the CSS height property as well with the auto value, just be aware that its implementation isn't as fully supported as width in browsers, so use it carefully.
The object's height is based on its flow-object height, and this is added to any containing elements and that is used by the browser to dynamically size and display it by calculating the document's height and comparing it to the window.innerHeight value.
This approach frees designers from the constraints of fixed-width designs. To ensure that the object isn't overly "shrunk" via dynamic resizing, use a min-width in the CSS selector's properties.
All W3C-compliant browsers will accept width (be sure to use a DOCTYPE declaration, however, so browser "quirks" mode doesn't take over), working perfectly fine in IE8, Firefox 3.5.3 and Opera 10. However, be aware that to be fully cross-browser compatible, you'll want your CSS to also implement browser zeroing for the html, body, div and other major container element constructs you use by setting margin and padding to zero. This removes the oddities of the different browser's box model computations. Child elements that inherit the zeroed cascade can be designed to override the "zeroed" default by either using id or class selectors to set margin and padding.
|