• Objective: Fluid width to handle a variety of resolutions and viewpane dimensions.
  • I want the height of the main content pane to be ~90% of the screen irregardless of the text size the user's browser is rendering. Should be centered by width and height: javascript to get dimensions (later)
Current Bones to Chew On: Child div positioning...
My problem with all of this is that I'm used to Flash squeezing content into the movie area on the fly :) How to turn apples into oranges? Maybe that's the answer. Use Flash instead of CSS? The point is to learn some CSS kung-fu...
  • #top and #bottom take their location cues from the #container div (width:80%). OK, fine. #topmenu and #bottom_right do the same/inherit.
    Question: How do I force these two divs to take into consideration the padding of #container so that they (and content) position themselves from the rightmost edge of #top and #bottom INSIDE the padding? It seems counterintuitive to me (but that's the standard, I know) to factor the padding as content.
  • In the same way as the item above, #submenu2 takes it's location cues from the bottomof #container -do you see the menu item "dimsum" on the bottom right?

Test document to see if it validates this document's style.css

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod purus vel tortor convallis ornare. Ut mattis, libero eget rutrum bibendum, dolor dolor accumsan massa, sit amet facilisis arcu tellus in odio. In hac habitasse platea dictumst. Maecenas dignissim lacinia nisl. Nulla volutpat ligula a felis. Proin cursus. Vivamus ut libero. Sed euismod feugiat nisl. Mauris ipsum. Suspendisse potenti. Sed nec augue eget nisl vulputate viverra. Nullam non diam a sem placerat feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis pharetra. Praesent vitae risus et libero tempor tempus. Vivamus iaculis bibendum mauris. Donec eget pede ut tellus eleifend bibendum. Proin ac augue egestas arcu condimentum aliquam. Nunc consequat est in lorem. Vivamus ac augue vel tellus volutpat nonummy.

...And this would be the bottom area which is supposed to be in the footer position
with a link or two