CSS Roadblock
Generally I like to use my blog for dispensing knowledge, advice, opinions, thoughts, musings, and of course, FACTS. But occasionally I get stuck on a point and all my research leads me to a dead end, and I’ll write a post that asks for help. I figure the answers just might help someone else down the line anyway, so it’s not purely selfish.
OK, so I’ve learned to stop worrying and love JavaScript. HTML I can tolerate. But CSS is gonna kick my ass.
Here’s what I want:
Two divs, floated side by side, varying amounts of text in them, but that text needs to be bottom aligned. Here’s what I came up with after a few Google searches:
[php lang=“HTML”]
Some content that will wrap lorem ipsum and all that crap just to make a long lon long div
other stuff
[/php]
And here’s what it looks like:
But I have one more need. I’m hard coding the height of the header class to be 100px. I want it to be the exact height of the tallest content. So that it looks like this:
The thing is, that because the header-content div is absolute positioned, then the header div’s height will be 0 unless explicitly set. So the bottom of header is the same as the top of header and header-content goes off the top of the page.
The only way I’ve managed to do this is via JavaScript something like this:
[php lang=“JavaScript”]var contents = document.getElementsByClassName( “header-content” );
var h = 0;
for( var i = 0; i < contents.length; i++ ) { var content = contents[ i ]; h = Math.max( h, content.offsetHeight ); } var headers = document.getElementsByClassName( “header” ); for( var i = 0; i < headers.length; i++ ) { var header = headers[ i ]; header.style.height = h + “px”; }[/php] This loops through the header-content divs, finding the tallest one. Then with that value, sets the height of both header divs. Works just fine. In Flash, I’d have no problem using code for layout. But I’d love to know if there is some pure CSS way to accomplish this.