robertmeyers0513 Posted July 21, 2009 Report Share Posted July 21, 2009 Ok, I've searched EVERYWHERE for a solution to this problem and have only found solutions to similar problems, but not this exact one. I normally don't post in forums because I can usually find the solution by searching online and trial and error. However, I am at a loss on this one. Hopefully I have overlooked a simple solution. Anyway, here is how I would like my site to be set up: http://www.freeimagehosting.net/uploads/9e6dfb1781.jpg[/img] The layout needs to have these properties: 1. The width of the wrapper div must be fluid. As the browser window is resized, the wrapper (and consequently the container div) must be resized to the width of the window as well. 2. The height of the content div will be determined from the amount of content placed in it. So, it needs to be able to dynamically expand vertically with the content. 3. The side divs will be empty (they will have an image repeated vertically) with a constant width. However, they need to dynamically expand vertically to be as tall as the content div. In other words, how can I make the two empty side divs be the same height as the content div? I am using php to load a specific style sheet for IE6, so it only needs to work with IE6. I have been able to get this layout to work with every other browser except IE6. I really don't want to use javascript, but I'm about ready to throw in the towel and use it. I hope somebody can help... Robert Quote Link to comment Share on other sites More sharing options...
falkencreative Posted July 21, 2009 Report Share Posted July 21, 2009 Technically, you can't do this with divs -- that's not how they work. They expand to fill their contents, and if their contents are empty, they won't expand dynamically. You could, however, do nested divs: content here and then use css: .sidebar1 { background: url() top left repeat-y; padding-left: 40px; } .sidebar2 { background: url() top right repeat-y; padding-right: 40px; } That should work. You'll get your repeating left and right columns, and the padding left/right will move the content into the correct spot. Quote Link to comment Share on other sites More sharing options...
robertmeyers0513 Posted July 21, 2009 Author Report Share Posted July 21, 2009 Wow. That's surprisingly simple and works for firefox, IE6, IE7, IE8, and chrome. Thanks a million! This has seriously made my life much easier! Robert Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 21, 2009 Report Share Posted July 21, 2009 falkencreative's code is simple and works well for a background-images in the sidebars; but note that he hasn't given the sidebars a width, only padding on one side. If you give sidebars a width, perhaps if you want to put text or links in them, the center content will be the same width because the content is nested inside sidebar2 which is nested inside sidebar1 and will take the width of the parent with the narrowest width. If you want sidebars with a width for a background image and text, see item 17a here http://www.wickham43.net/firefoxbackground.php which uses a more complicated nesting arrangement. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted July 21, 2009 Report Share Posted July 21, 2009 falkencreative's code is simple and works well for a background-images in the sidebars; but note that he hasn't given the sidebars a width, only padding on one side. Correct. My code example is really only intended to work for instances where you need a repeating left/right images that extend all the way down the page, and there is no actual content. Quote Link to comment Share on other sites More sharing options...
robertmeyers0513 Posted July 22, 2009 Author Report Share Posted July 22, 2009 Thanks guys! 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.
Note: Your post will require moderator approval before it will be visible.