unknown gamer Posted February 13, 2009 Share Posted February 13, 2009 I was wondering how to make a div the same height as another div. Like all div's match the height of the tallest div. Like on the test page: http://bbg.byethost32.com/ I've tried making a fake box around the news, content, and tabs but that doesn't work and I cannot figure this out. I would prefer not to use java script but if this is the easiest route i'll use it. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 14, 2009 Share Posted February 14, 2009 The answer depends on the style of page you are coding and the Structural elements on the page.Some designs need a background image, others need clearfix on the div's, and there are other methods.There is no one-size fits all. We are missing the Holy Grail of Web Design. Link to comment Share on other sites More sharing options...
shadowayex Posted February 14, 2009 Share Posted February 14, 2009 JavaScript's pretty much the way to go on this. I can build you something if you'd like. I've already got a function to uniform width, just a few tweaks and it'll work. Link to comment Share on other sites More sharing options...
jeffman Posted February 14, 2009 Share Posted February 14, 2009 Here's one hack that works for three columns. You have to stare at the CSS a while to figure out what's going on. The positive and negative 300px margins are key.http://www.sophox.com/www-samples/three-columns.html Link to comment Share on other sites More sharing options...
unknown gamer Posted February 16, 2009 Author Share Posted February 16, 2009 about Deirdre's Dad's hack: I noticed the background colour is div.outers' borders. How do i make a border between them all? like left box, border, center box, border, rightbox?edit: the hack isn't exactly what I was looking for, I wanted it in boxes like how it is on the site now. What's on the site in the 1st post works, but when I add text the news box does not expand... Can someone help? Link to comment Share on other sites More sharing options...
jlhaslip Posted February 16, 2009 Share Posted February 16, 2009 Oops!Retracted my reply. It doesn't work. I had proposed borders on the outside div's, but the border only goes as per the length of the content in the column.*fail* Link to comment Share on other sites More sharing options...
unknown gamer Posted February 16, 2009 Author Share Posted February 16, 2009 Hmm? I don't understand what your are trying to say?Edit: I found an alternative to the last thing but I ran into another problem. Why do floating objects not extend a border?http://bbg.byethost32.com/good.html as you can see here, the tab stuff has went out of the border but it is wrapped in the border div.Is there a code you can use to fix this? Link to comment Share on other sites More sharing options...
unknown gamer Posted February 17, 2009 Author Share Posted February 17, 2009 Can someone please help with this? Link to comment Share on other sites More sharing options...
shadowayex Posted February 18, 2009 Share Posted February 18, 2009 When an object is floated, it doesn't retain it's normal properties. Instead of making it's container bigger to fit inside, it'll just render outside of it's container if it doesn't fit. I don't know how to fix this, I'm having the same problem and no one's answered me either. The only thing I can think of for you is to figure out how long it needs to be and set the height appropriately. If it'll need to dynamically change, use some JavaScript. Link to comment Share on other sites More sharing options...
unknown gamer Posted February 18, 2009 Author Share Posted February 18, 2009 Well I need it to fit to the size of the tallest div. Link to comment Share on other sites More sharing options...
jeffman Posted February 18, 2009 Share Posted February 18, 2009 The id's of your divs will give you a reference to each of them. The height of each div is found in element.offsetHeight . Use some arithmetic to find out which is tallest. Then make the others the same height by adjusting element.style.height . Link to comment Share on other sites More sharing options...
unknown gamer Posted February 19, 2009 Author Share Posted February 19, 2009 Hmm i'll try it.. I'm just learning JS now though.Oky, i'm using this code:heightNews = document.getElementById("news").offsetHeight;heightTabs = document.getElementById("tabs").offsetHeight;heightContbox = document.getElementById("contbox").offsetHeight;if (heightNews > heightTabs && heightNews > heightContbox){document.getElementById("tabs").offsetHeight=heightNews;document.getElementById("contbox").offsetHeight=heightNews;}if (heightTabs > heightNews && heightTabs > heightContbox){document.getElementById("news").offsetHeight=heightTabs;document.getElementById("contbox").offsetHeight=heightTabs;}if (heightContbox > heightNews && heightContbox > heightTabs){document.getElementById("news").offsetHeight=heightContbox;document.getElementById("tabs").offsetHeight=heightContbox;}It's still not working. T_TIt's acting like the code is not even there. Link to comment Share on other sites More sharing options...
unknown gamer Posted February 20, 2009 Author Share Posted February 20, 2009 Solved with this awesome script: http://www.paulbellows.com/getsmart/balance_columns/ . Hopefully if people search and find this topic they will be able to use that code. Link to comment Share on other sites More sharing options...
jeffman Posted February 20, 2009 Share Posted February 20, 2009 I've embedded a script in a complete document so anyone who wants to test it can just copy and paste. I think the script is a bit simpler than the one unknowngamer passed along to us, though it's hard to tell because that one is so heavily commented. I've tested this one in Firefox, anyway -- I don't see why it wouldn't work everywhere. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> div#a, div#b, div#c, div#d { float:left; width: 150px; } div#a { background-color: #faa; } div#b { background-color: #afa; } div#c { background-color: #aaf; } div#d { background-color: #bbb; } </style> <script type="text/javascript"> function sort_by_height (a,b) { return document.getElementById(a).offsetHeight - document.getElementById(b).offsetHeight; } var perm_h = 0; function adjust_columns () { var arr = Array.prototype.slice.call(arguments); arr = arr.sort(sort_by_height).reverse(); var h = document.getElementById(arr[0]).offsetHeight + "px"; if (h == perm_h) {return;} perm_h = h; var len = arr.length; for (var i = 1; i < len; i++) { document.getElementById(arr[i]).style.height = h; } } var CI; function init () { // THIS IS THE ONLY LINE YOU NEED TO CHANGE. PASS IT AS MANY ID's AS YOU WANT. CI = setInterval("adjust_columns('a','b','c','d')", 250); } window.onload = init; </script> </head> <body> <div id="a"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sed mauris quis arcu bibendum blandit. Donec laoreet lacinia turpis. Vestibulum nec dolor vel orci ullamcorper fringilla. Nullam et eros non ligula condimentum consequat. Nullam et leo. Quisque auctor elementum elit. </div> <div id="b"> Donec laoreet lacinia turpis. Vestibulum nec dolor vel orci ullamcorper fringilla. Nullam et eros non ligula condimentum consequat. Nullam et leo. Quisque auctor elementum elit. Maecenas ac augue. Nam tincidunt tincidunt neque. Aliquam in purus. Fusce aliquam suscipit erat. Aliquam non justo. Phasellus id sapien vel arcu tincidunt pharetra. Duis egestas ligula. Fusce mattis ante ac arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eleifend imperdiet nisi. </div> <div id="c"> Donec laoreet lacinia turpis. Vestibulum nec dolor vel orci ullamcorper fringilla. Nullam et eros non ligula condimentum consequat. Nullam et leo. Quisque auctor elementum elit. </div> <div id="d"> Mauris et neque. Aliquam ipsum. Praesent metus massa, egestas a, tempus nec, sodales eget, tortor. Ut aliquam velit at sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam luctus ultricies magna. Proin ante arcu, fringilla ac, gravida quis, vehicula vel, purus. Donec vulputate tempor massa. In placerat venenatis pede. Pellentesque eleifend. Aenean accumsan nisl. Donec vel tortor vitae justo sollicitudin pellentesque. Curabitur fermentum rhoncus leo. Mauris accumsan, nulla ac cursus volutpat, quam dolor posuere purus, sit amet consectetuer mi ante sed orci. Duis consequat sapien at ligula. </div> </body></html> Link to comment Share on other sites More sharing options...
unknown gamer Posted February 20, 2009 Author Share Posted February 20, 2009 I shall try that out later, thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.