wilee Posted June 14, 2010 Share Posted June 14, 2010 Hi all, I just started writing a template that looks as follows ... <body> <div id="frame"> <div id="left"></div> <div id="right"></div> </div> </body> ... the css is * { padding: 0; margin: 0; } #frame { height: 100%; width: 100%; min-width: 800px; } #left { float: left; height: 100%; width: 40%; min-width: 300px; } #right { float: right; height: 100%; width: 60%; min-width: 500px; } So both min-width of #left/#right 300px and 500px add up to 800px which is the min-width of #frame. Intuitively #left and #right should never be stacked vertically, as when the window size goes below 800px it automatically adds scrollbars to the window due to the min-width of #frame. However they do get stacked vertically when resizing the window below 800px.. They already get stacked with widht 820px or even more. As I set both padding and margin to 0, I don't see why they are already going to be stacked before windowsize < 800px. Any ideas? Quote Link to comment Share on other sites More sharing options...
haku Posted June 15, 2010 Share Posted June 15, 2010 Browser? Quote Link to comment Share on other sites More sharing options...
wilee Posted June 15, 2010 Author Share Posted June 15, 2010 Ah right sry, I viewed it using Firefox 3.6.3 Quote Link to comment Share on other sites More sharing options...
haku Posted June 15, 2010 Share Posted June 15, 2010 Always good to include that info, though in this case it wasn't the browser (I thought you may be using IE6, which can do some funny thing with floated elements). This one is a little tricky. It takes a bit of math. Look at it this way. Lets look a the sizes when the container is 800 px: left: 800px * 40% = 320px; right: 800px * 60% = 480px; But you have given right a minimum width of 500px. 500px + 320px = 820px 820px is bigger than 800 px, so the two elements don't fit side-by-side in the container, and the right one drops down below where it can fit. Quote Link to comment Share on other sites More sharing options...
wilee Posted June 15, 2010 Author Share Posted June 15, 2010 Ah! Thank you! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.