kurt.santo Posted December 13, 2007 Share Posted December 13, 2007 Have two divs next to each other. Left one is floated to left and has site navigation. Right one is reserved for relevant page content. Both have a different bg colour. Although I kind of had a similar issue before I am lost in how to make both stretch to the same level down (depending which is the longer one). SOS!Kurt - the one still struggling with his newly acquired skills in laying out pages without the help of tables... Link to comment Share on other sites More sharing options...
aalbetski Posted December 13, 2007 Share Posted December 13, 2007 this works for me. It needs to adjust the height when the amount of data is larger than the viewport, as you'll see in this example. Thats why the script is there. It has not been tweaked for browsers other than IE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <script> function setup() { document.getElementById("cn").style.height= document.documentElement.scrollHeight + "px" } </script> <style> html { height:100%; } body { height:100%; margin:0; padding:0; } #cn { background-color:aliceblue; margin:0px auto; padding:0; width:800px; height:100%; position:relative; } #left { float:left; width:50%; height:100%; background-color:lightgrey; color:white; } #right { float:right; width:50%; height:100%; background-color:lightyellow; } </style> </head> <body onload="setup()"> <div id="cn"> <div id="left"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. </div> <div id="right"> <p>Donec at massa a elit egestas rutrum. Sed massa. Vestibulum laoreet enim et urna. Morbi turpis. Vivamus pede tortor, ullamcorper vel, sagittis eu, gravida non, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc turpis enim, aliquam sit amet, fringilla nonummy, suscipit at, sapien. Suspendisse potenti. Phasellus vulputate massa ullamcorper lorem cursus ullamcorper. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <p>Mauris nonummy facilisis diam. Etiam malesuada lobortis risus. Integer vel magna at elit porta placerat. Mauris tellus ligula, mattis vitae, tempus id, scelerisque vitae, ante. Donec a tortor non odio faucibus volutpat. In vitae arcu a risus placerat tincidunt. Sed ultrices accumsan velit. Proin mollis leo in lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin vitae velit. Duis sed orci. Nam fringilla, risus at ultricies pharetra, odio lorem viverra leo, et pretium metus leo ut nisi. Vestibulum sed ligula. Integer lacinia justo ac mauris. Suspendisse potenti. Vestibulum est ante, viverra ut, feugiat quis, scelerisque a, turpis. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. <p>Donec at massa a elit egestas rutrum. Sed massa. Vestibulum laoreet enim et urna. Morbi turpis. Vivamus pede tortor, ullamcorper vel, sagittis eu, gravida non, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc turpis enim, aliquam sit amet, fringilla nonummy, suscipit at, sapien. Suspendisse potenti. Phasellus vulputate massa ullamcorper lorem cursus ullamcorper. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <p>Mauris nonummy facilisis diam. Etiam malesuada lobortis risus. Integer vel magna at elit porta placerat. Mauris tellus ligula, mattis vitae, tempus id, scelerisque vitae, ante. Donec a tortor non odio faucibus volutpat. In vitae arcu a risus placerat tincidunt. Sed ultrices accumsan velit. Proin mollis leo in lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin vitae velit. Duis sed orci. Nam fringilla, risus at ultricies pharetra, odio lorem viverra leo, et pretium metus leo ut nisi. Vestibulum sed ligula. Integer lacinia justo ac mauris. Suspendisse potenti. Vestibulum est ante, viverra ut, feugiat quis, scelerisque a, turpis. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. </div> </div> <body></html> Link to comment Share on other sites More sharing options...
kurt.santo Posted December 14, 2007 Author Share Posted December 14, 2007 this works for me. It needs to adjust the height when the amount of data is larger than the viewport, as you'll see in this example. Thats why the script is there. It has not been tweaked for browsers other than IE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <script> function setup() { document.getElementById("cn").style.height= document.documentElement.scrollHeight + "px" } </script> <style> html { height:100%; } body { height:100%; margin:0; padding:0; } #cn { background-color:aliceblue; margin:0px auto; padding:0; width:800px; height:100%; position:relative; } #left { float:left; width:50%; height:100%; background-color:lightgrey; color:white; } #right { float:right; width:50%; height:100%; background-color:lightyellow; } </style> </head> <body onload="setup()"> <div id="cn"> <div id="left"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. </div> <div id="right"> <p>Donec at massa a elit egestas rutrum. Sed massa. Vestibulum laoreet enim et urna. Morbi turpis. Vivamus pede tortor, ullamcorper vel, sagittis eu, gravida non, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc turpis enim, aliquam sit amet, fringilla nonummy, suscipit at, sapien. Suspendisse potenti. Phasellus vulputate massa ullamcorper lorem cursus ullamcorper. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <p>Mauris nonummy facilisis diam. Etiam malesuada lobortis risus. Integer vel magna at elit porta placerat. Mauris tellus ligula, mattis vitae, tempus id, scelerisque vitae, ante. Donec a tortor non odio faucibus volutpat. In vitae arcu a risus placerat tincidunt. Sed ultrices accumsan velit. Proin mollis leo in lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin vitae velit. Duis sed orci. Nam fringilla, risus at ultricies pharetra, odio lorem viverra leo, et pretium metus leo ut nisi. Vestibulum sed ligula. Integer lacinia justo ac mauris. Suspendisse potenti. Vestibulum est ante, viverra ut, feugiat quis, scelerisque a, turpis. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. <p>Donec at massa a elit egestas rutrum. Sed massa. Vestibulum laoreet enim et urna. Morbi turpis. Vivamus pede tortor, ullamcorper vel, sagittis eu, gravida non, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc turpis enim, aliquam sit amet, fringilla nonummy, suscipit at, sapien. Suspendisse potenti. Phasellus vulputate massa ullamcorper lorem cursus ullamcorper. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <p>Mauris nonummy facilisis diam. Etiam malesuada lobortis risus. Integer vel magna at elit porta placerat. Mauris tellus ligula, mattis vitae, tempus id, scelerisque vitae, ante. Donec a tortor non odio faucibus volutpat. In vitae arcu a risus placerat tincidunt. Sed ultrices accumsan velit. Proin mollis leo in lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin vitae velit. Duis sed orci. Nam fringilla, risus at ultricies pharetra, odio lorem viverra leo, et pretium metus leo ut nisi. Vestibulum sed ligula. Integer lacinia justo ac mauris. Suspendisse potenti. Vestibulum est ante, viverra ut, feugiat quis, scelerisque a, turpis. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt semper lectus. Fusce eu nulla quis libero venenatis vulputate. Vestibulum porta. Aliquam leo. Maecenas eu ante et arcu sagittis nonummy. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Nunc ornare suscipit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id tellus. Suspendisse potenti. Fusce nec nulla quis turpis porta pretium. </div> </div> <body></html> Your script also works fine in IE, cheers! The only problem I have that some users might have scripting disabled, so I am after a script-free solution as such. I know you can use faux columns, but as I use percentages for the width of my divs cannot use this approach...Kurt Link to comment Share on other sites More sharing options...
aalbetski Posted December 14, 2007 Share Posted December 14, 2007 I tried (in vain) to find a way to do this without script. The problem is that you never now the size of the viewport that the user will have when they load the page. If you find a way using only CSS that fits all browsers, Please publish it here!This CAN be done (with CSS only) using IE dynamic properties, I did not post that solution because it is IE only. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 you can fake it with background images it is about the only consistent way. Link to comment Share on other sites More sharing options...
aalbetski Posted December 14, 2007 Share Posted December 14, 2007 Problem there is that I actually want to use the background image for something else. Argh Link to comment Share on other sites More sharing options...
aspnetguy Posted December 14, 2007 Share Posted December 14, 2007 sorry , sometimes you just can't completely abandon tables. Link to comment Share on other sites More sharing options...
kurt.santo Posted December 14, 2007 Author Share Posted December 14, 2007 sorry , sometimes you just can't completely abandon tables.On this one will go back to tables for my layout too. As I have percentages for my divs/columns to adjust to screensize cannot use faux columns and cannot use scripts neither:-( Worse things happen at sea;-)Kurt Link to comment Share on other sites More sharing options...
elementalgrace Posted December 20, 2007 Share Posted December 20, 2007 You can do this using divs and CSS. Your container div needs to have a specific height applied to it (if you use min-height, this works perfectly well to allow for stretching) and then if you set the divs inside the container element both to 100% they will stretch to fit the height of the outside div. So no matter which of the inner divs has more content, both will show as being the same height. Link to comment Share on other sites More sharing options...
aalbetski Posted December 20, 2007 Share Posted December 20, 2007 You can do this using divs and CSS. Your container div needs to have a specific height applied to it (if you use min-height, this works perfectly well to allow for stretching) and then if you set the divs inside the container element both to 100% they will stretch to fit the height of the outside div. So no matter which of the inner divs has more content, both will show as being the same height.You still do not solve the problem of when one of the divs exceeds the height of the viewport (and vertical scrollbars are then visible). The height reference (or min-height) of 100% only consumes the viewport height and not the scroll-height. A fixed height is also not acceptable as the divs must size to the largest column. Thats what the problem is now. The solution I provided with a script adjustment to adjust to the scroll-height was unacceptable to the requestor who wanted a 100% CSS solution. This would not be an issue if the background colors of the divs were not an issue. And using a fake background image to do this is also unacceptable as the intent (from my point of view now) because I wish to use the background image for another purpose.If you can present your code using the divs from my proposed solution with your CSS showing the way, we all will be in your debt. Link to comment Share on other sites More sharing options...
kurt.santo Posted December 20, 2007 Author Share Posted December 20, 2007 You still do not solve the problem of when one of the divs exceeds the height of the viewport (and vertical scrollbars are then visible). The height reference (or min-height) of 100% only consumes the viewport height and not the scroll-height. A fixed height is also not acceptable as the divs must size to the largest column. Thats what the problem is now. The solution I provided with a script adjustment to adjust to the scroll-height was unacceptable to the requestor who wanted a 100% CSS solution. This would not be an issue if the background colors of the divs were not an issue. And using a fake background image to do this is also unacceptable as the intent (from my point of view now) because I wish to use the background image for another purpose.If you can present your code using the divs from my proposed solution with your CSS showing the way, we all will be in your debt.I agree!!!!Kurt Link to comment Share on other sites More sharing options...
elementalgrace Posted December 21, 2007 Share Posted December 21, 2007 I agree!!!!KurtYou can see a fuller explanation on http://articles.techrepublic.com.com/5100-22-5268973.html. Perhaps it's not what you're looking for but it doesn't hurt to have a look. Link to comment Share on other sites More sharing options...
aalbetski Posted December 21, 2007 Share Posted December 21, 2007 The site you referred us to, albeit interesting, does not offer any additional insight to this issue. It, in fact, uses the techniques we specifically said we did NOT want to use. Those being using a background-image to force a column height. This then denies us the use of the background image property for any other use. By changing just this much of that code, you will see that the problem is still there:div#column2 { margin: 0; padding: 0; XXXbackground-image: url(side2.gif); <-- take out this background-position: right; background-repeat: repeat-y; width: 100%; background-color: #FFFF99;}div#navcol { padding: 10px; width: 130px; float: left; background-color:red; <-- Add this}and you are right where we started. As I mentioned before, if we didn't need to use the background-color, there would not be a problem. Link to comment Share on other sites More sharing options...
kurt.santo Posted December 24, 2007 Author Share Posted December 24, 2007 The site you referred us to, albeit interesting, does not offer any additional insight to this issue. It, in fact, uses the techniques we specifically said we did NOT want to use. Those being using a background-image to force a column height. This then denies us the use of the background image property for any other use. By changing just this much of that code, you will see that the problem is still there:div#column2 { margin: 0; padding: 0; XXXbackground-image: url(side2.gif); <-- take out this background-position: right; background-repeat: repeat-y; width: 100%; background-color: #FFFF99;}div#navcol { padding: 10px; width: 130px; float: left; background-color:red; <-- Add this}and you are right where we started. As I mentioned before, if we didn't need to use the background-color, there would not be a problem.Completely right...Kurt Link to comment Share on other sites More sharing options...
Synook Posted December 25, 2007 Share Posted December 25, 2007 Well what about two divisions that occupy exactly the same space, but the inner one has your background-image and the outer one has the background color required to make it look as if the columns are the same length? Link to comment Share on other sites More sharing options...
kurt.santo Posted January 6, 2008 Author Share Posted January 6, 2008 Well what about two divisions that occupy exactly the same space, but the inner one has your background-image and the outer one has the background color required to make it look as if the columns are the same length?Sorry for late reply. But just back from Christmas break...The so called faux-column layout was sth I used in the past. For this project I wanted to refrain from using it and gave up and designed whole site with a table (bad, bad, bad, I know). Not being happy with my decision I spend my Christmas holiday trying to figure out how to achieve it without any tricks and cheats. And guys, you can get excited: there is a way to achieve just this! Have a look under http://www.jalp.co.uk/assets/vertNavStretch/index.php and you see how it works. It works fine when the nav bar column is definitely the shorter column, if it might be longer than the content column you have to use min-height as in http://www.jalp.co.uk/assets/vertNavStretch/index2.php. Having had so much help in this forum, I hope that you guys can make good use of it!Kurt Link to comment Share on other sites More sharing options...
kurt.santo Posted January 6, 2008 Author Share Posted January 6, 2008 Well what about two divisions that occupy exactly the same space, but the inner one has your background-image and the outer one has the background color required to make it look as if the columns are the same length?Sorry for late reply. But just back from Christmas break...The so called faux-column layout was sth I used in the past. For this project I wanted to refrain from using it and gave up and designed whole site with a table (bad, bad, bad, I know). Not being happy with my decision I spend my Christmas holiday trying to figure out how to achieve it without any tricks and cheats. And guys, you can get excited: there is a way to achieve just this! Have a look under http://www.jalp.co.uk/assets/vertNavStretch/index.php and you see how it works. It works fine when the nav bar column is definitely the shorter column, if it might be longer than the content column you have to use min-height as in http://www.jalp.co.uk/assets/vertNavStretch/index2.php. Having had so much help in this forum, I hope that you guys can make good use of it!KurtActually, if someone could do me a favour and test if min-height or height works well with IE 6 in case the content is higher than nav bar that would be great (is not relevant for my project, but interesting to know). Does anyone know how to test a browser when you do not have it installed? Link to comment Share on other sites More sharing options...
elementalgrace Posted January 7, 2008 Share Posted January 7, 2008 Sorry for late reply. But just back from Christmas break...The so called faux-column layout was sth I used in the past. For this project I wanted to refrain from using it and gave up and designed whole site with a table (bad, bad, bad, I know). Not being happy with my decision I spend my Christmas holiday trying to figure out how to achieve it without any tricks and cheats. And guys, you can get excited: there is a way to achieve just this! Have a look under http://www.jalp.co.uk/assets/vertNavStretch/index.php and you see how it works. It works fine when the nav bar column is definitely the shorter column, if it might be longer than the content column you have to use min-height as in http://www.jalp.co.uk/assets/vertNavStretch/index2.php. Having had so much help in this forum, I hope that you guys can make good use of it!KurtActually, if someone could do me a favour and test if min-height or height works well with IE 6 in case the content is higher than nav bar that would be great (is not relevant for my project, but interesting to know). Does anyone know how to test a browser when you do not have it installed?IE6, as far as I know, does not support min-height. I tested it in my standalone version of IE6 and the nav bar is breaking out of the box. I tend to set min-height for all the browsers that support it and follow it with "height:auto !important; height:xxx;" which IE6 will pick up, setting the height unless the content forces the height in which case the height: auto !important will override it.You can try downloading standalone versions of various browsers from http://browsers.evolt.org/?ie/32bit/standalone although there are some things that the browser itself does support that doesn't show on the standalone versions such as the IE PNG opacity fixes. The other solution I found was to install Microsoft Virtual PC and install different instances with the browsers I needed on them so every time I need to test, I just open it up and the browsers work perfectly, just as they should. Link to comment Share on other sites More sharing options...
kurt.santo Posted January 8, 2008 Author Share Posted January 8, 2008 "height:auto !important; height:xxx;" Microsoft Virtual PCThanks for your input! What does the exclamation mark exactly do? I never used this in my css. Then, the virtual pc is some sort of software, so you computer can act as if it were different machines? Is it expensive?Kurt Link to comment Share on other sites More sharing options...
Ingolme Posted January 8, 2008 Share Posted January 8, 2008 !important means that that CSS rule has the highest priority, but Internet Explorer 6 ignores it and will use the last CSS rule given instead. Link to comment Share on other sites More sharing options...
elementalgrace Posted January 8, 2008 Share Posted January 8, 2008 Microsoft Virtual PC is free to download and you can read more about it here: http://www.microsoft.com/windows/products/...c/overview.mspx It's quite a handy tool of you want to test stuff on multiple operating systems or multiple versions of browsers or whatever ...Ingolme explained !important well but Google it if you want more information - there's loads of stuff on the web about it. Link to comment Share on other sites More sharing options...
kurt.santo Posted January 9, 2008 Author Share Posted January 9, 2008 Microsoft Virtual PC is free to download and you can read more about it here: http://www.microsoft.com/windows/products/...c/overview.mspx It's quite a handy tool of you want to test stuff on multiple operating systems or multiple versions of browsers or whatever ...Ingolme explained !important well but Google it if you want more information - there's loads of stuff on the web about it.Cheers:-)Kurt Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.