Arbitrator
05-10-2006, 04:16 AM
Okay, I thought this'd be easy but it's turned out to be another pain.
I'm trying to create a classic fixed-width navigation, dynamic-width content design that'll have a max-width of 1000px. When the viewport is less than 1000 pixels wide, the content block should dynamically get smaller, filling 100% of the page width with the "columns" remaining side-by-side.
The problem is that when I shrink the content div below the max-width (by resizing the window), that div, without an assigned width, is somehow too wide and gets wrapped to the next line, below the menu div. I at least got it to stay on the same line when the viewport is greater than 1000px wide so that the width of the content block is capped through a second max-width. I've done this kind of layout before but not with a dynamic width and I don't know how to fix this without giving it a width which defeats the point... Maybe I'm going about it wrong. Any ideas?
HTML: http://www.angelfire.com/droid/plgaries/personal.html
CSS: http://www.angelfire.com/droid/plgaries/master.css
I'm trying to create a classic fixed-width navigation, dynamic-width content design that'll have a max-width of 1000px. When the viewport is less than 1000 pixels wide, the content block should dynamically get smaller, filling 100% of the page width with the "columns" remaining side-by-side.
The problem is that when I shrink the content div below the max-width (by resizing the window), that div, without an assigned width, is somehow too wide and gets wrapped to the next line, below the menu div. I at least got it to stay on the same line when the viewport is greater than 1000px wide so that the width of the content block is capped through a second max-width. I've done this kind of layout before but not with a dynamic width and I don't know how to fix this without giving it a width which defeats the point... Maybe I'm going about it wrong. Any ideas?
HTML: http://www.angelfire.com/droid/plgaries/personal.html
CSS: http://www.angelfire.com/droid/plgaries/master.css