I already have this layout created using CSS, but its plagued with issues in IE6 and 7. So I'd like help recreating this layout using jQuery (and jQuery Only) for max compatibility. The only difficult part is the vertically and horizontally resizable (on browser resize as well) content area.
Edited to add: I need to use jQuery for resizable content area only, I don't want to use the height:100% hacks, they don't work well.
I'd really appreciate any help. Many thanks!
I suggest you don't use jQuery for this but keep doing it in CSS (maybe you can post another question asking how to fix it for IE6 and IE7).
Using jQuery for maximum compatibility is a mistake since it requires javascript, and there are people with javascript disabled that would be completely unable to view your website correctly.
Also search engines like google will probably be unable to crawl your website.
Finally, all that javascript and jQuery do is generate html tags and css attributes, so you'll run into the same problems with IE6 and IE7!
HTML defines the semantics. CSS defines the look and layout. And with JS you can do fancy animations and AJAX stuff.
Use everything for what it's made for. JS can also do nothing else then generating HTML and CSS.
Merry Christmas!
Use a table for your layout. You get the resizing of your content area free - no hacks, no javascript, works in all browsers. The purists will be mad at you (and me), but your layout will work and your users will be happy.
Maybe when we get widespread adoption of html 5 and css 3 we will be able to do this nicely with css layouts, but until then...
Jquery will be of no use for your problem, it is a javascript framework (library) to accelerate javascript coding.
You can either do it right with css, or tables, but jquery doesn't have anything to do with layout.