Stephen Pontes [.com]

Nerdy post alert!

I was recently working on a website project and had to create a div with a float:right; attribute. Only problem was, the div needs to be 100% of the height of the parent element. As we all know, floated elements automatically adjust their height to fit their contents.

I did some googling and found a good link to a demonstration of exactly what I needed to do. Their article describing how to implement this, however, was a little hard for me to understand.

So I examined the source directly and found what I needed. Assign the position: relative; attribute to the parent (container) div, and position: absolute; to the floated element (the div you want to be 100% in height).

I then implemented it as such:

/* Hold the floated column */
#container {
	position: relative;
	padding-right: 275px; 	/* Column width + 15 (Use padding-left if the column is on the left) */
	}

#info_pane {
	position: absolute;
	right: 0;  		/* Use left: 0; if your column is on the left */
	padding-left: 15px; 	/* Adds whitespace for the info pane content */
	height: 100%; 		/* Woohoo! */
	width: 250px; 		/* How wide the column is */
	}

Hope this helps out someone else with their own project!