yaniv81 Posted July 7, 2011 Report Share Posted July 7, 2011 (edited) Hi, I want to make a two columns website, where the right column and the left column stretch to height of the main content div, and basically if one div is higher than the other I want the shorter column to stretch with it (just like if I do it with a table, then both of the tds have the same height) here is a simple code of what I'm trying to do, also I was wondering if this is possible without setting height to the main div? thanks for any help <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #main{ margin:0 auto; background-color:#000; width:700px; } #left{ background-color:#F00; float:left; width:300px; } #right{ background-color:#00F; float:right; width:350px; } </style> </head> <body> <div id="main">blah <div id="left"> </div> <div id="right">blah<br />blah<br />blah<br />blah<br /></div> </div> </body> </html> here is a simple code where I tried to do it... Edited July 7, 2011 by yaniv81 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted July 7, 2011 Report Share Posted July 7, 2011 Unfortunately divs don't work that way. You have a couple options: -- manually set a height on the columns -- use Javascript to find the height of #main, and then set all columns to the same height -- "fake" the columns, but adding a repeating background image that has the same background as #left and #right to #main so that it appears that the columns continue down the page Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 7, 2011 Report Share Posted July 7, 2011 If you are only concerned about the background colors for the #left and #right divs, and because your divs have a fixed width, the easiest method is faux columns http://www.alistapart.com/articles/fauxcolumns/ where you make a fixed width image with the two colors across the width and perhaps only 1px high, then repeat it with repeat-y as a background image in the parent div (the example has a more complicated image with side shadows). Clear the floats before closing the #main div by adding overflow: hidden; to the style for #main. The divs don't need heights, they will be as high as the div with most content. If you have a fluid with page you can't use faux columns with a fixed width image, so use this tutorial which has % widths http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks which is a lot more complicated. Quote Link to comment Share on other sites More sharing options...
yaniv81 Posted July 7, 2011 Author Report Share Posted July 7, 2011 thanks a lot for he info guys, I will follow the tutorials ben - if u know a good tutorial about how to do it with JavaScript I'd like to see it... Quote Link to comment Share on other sites More sharing options...
sarath Posted July 8, 2011 Report Share Posted July 8, 2011 (edited) use <div style:"clear:both; height:1px"> </div> option after floated columns. Edited July 8, 2011 by sarath Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 8, 2011 Report Share Posted July 8, 2011 (edited) use <div style:"clear:both; height:1px"> </div> option after floated columns. Overflow: hidden; in the parent div style does the same as the div with clear:both; so with my code the clear div is unnecessary. Your code above should be style= not style: The "clear" div is item 2b here:- http://www.wickham43.net/firefoxbackground.php while the overflow: hidden; method is item 2d Item 18 is faux columns; item 16 is another method of nesting divs similar to the http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks solution but mine only works if the right column has most content and has simpler code for nesting the divs while his works if any column has most height and is more complicated. Edited July 8, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
sarath Posted July 9, 2011 Report Share Posted July 9, 2011 (edited) Thank you for Your response wickham. I am learning that new things now.Thank u. Edited July 9, 2011 by sarath Quote Link to comment Share on other sites More sharing options...
Archadian28 Posted July 9, 2011 Report Share Posted July 9, 2011 Couldn't you use jQuery to do something like that? Get the height of the #main div and have it equal both the #left and #right? Or set them all equal to each other? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted July 9, 2011 Report Share Posted July 9, 2011 Couldn't you use jQuery to do something like that? Get the height of the #main div and have it equal both the #left and #right? Or set them all equal to each other? Yeah, that's one way to approach it using Javascript. If this is the only thing you use jquery for, that seems a bit overkill, and probably should be done with straight Javascript, but if you're using jquery for other parts of the project as well, jquery makes a lot of sense. 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.