javascript adjust content wrapper on resize

Both are set to 75% of the browser window, but the navigation DIV may need more room than that. Also note the HEIGHT values on the two DIVs. Note that the CSS rule sets the WIDTH of the navigation DIV to 125px, but we placed an image inside the DIV itself that's 163px wide. Pay particular attention to the HEIGHT and WIDTH values on the classes and on the images inside the HEAD section: If one DIV displays larger than you expect, other important content may be hidden from view! It may seem like Explorer is doing you a favor, but consider the result if you're using absolute positioning to place all page elements. Who's right? Well, Explorer isn't following the CSS standards released by the World Wide Web Consortium (W3C) while the other browsers are.

It considers HEIGHT and WIDTH values to be minimum values and expands the DIV to contain all the content you want - just like a table cell. Internet Explorer is much more forgiving. So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or text that takes up more space, the display will be a jumbled mess. Mozilla, Netscape, and Opera browsers interpret these values as the exact measurements and don't allow a DIV's HEIGHT or WIDTH values to extend beyond what you specify. Like so many annoying design issues, the basic problem is not with the CSS rules themselves, but how browsers choose to interpret them. Make a note of this: Table cells stretch to fit the content placed inside them, but DIVs may not! If you understand this issue, you'll save yourself a lot of frustrated debugging time. However, there is one big difference in behavior. It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH attributes set, contain borders, etc. This seems like the ideal candidate for transition from a table-based layout to a CSS layout. One contains the navigation menu and the other contains page content. Unfortunately, as layouts become more complex, browser compatibility problems increase.Ĭompatibility Problems With HEIGHT And WIDTHĬonsider one of the simplest layouts around: two columns placed side-by-side. Formatting instructions (font family, color, border, etc.)ĭesigners use the DIV to create complex page layouts without using tables.Originally meant as a simple tool to group page elements, the DIV tag gives designers additional flexibility and control over layout when it's combined with Cascading Style Sheet (CSS) properties. Search MS Office A-Z | Search Web Pages/ Design A-Z CSS- Div- Be Careful When You Size Your Divs Home CSS Div Be Careful When You Size Your Divs

Javascript adjust content wrapper on resize