Jump to content

Height


unknown gamer
 Share

Recommended Posts

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

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

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

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...