Laying out nested DIVs with CSS
Tell me what you want, but CSS is twisted. Some simple basic tasks that should be no-brainer sometimes make you throw things and say words you later deeply regret. Usually people use IE6 as lightning rod, sadly even if you don't care about IE6 anymore CSS still will find ways to hurt you. Consider this simple scenario - I want DIV with some text and 3 little ones inside it alined right.
In a sane world, you would create a DIV, text element inside it, then 3 more DIVs with appropriate size and alignment. In CSS world, you should first "wrap your head around it" - meaning, make your brain just as twisted so it is in sync with framework. Then you understand that this is not how things "float". You need to do it all backwards! Is it hard? No. Intuitive? Hell no! May be, we need jQuery for CSS to make things to make sense. I think I even saw one somewhere on the internet, may be I'll go look around. But first I need to turn few pages in my old good "VB for dummies" book to calm down.
<html>
<head>
<style>
#widget { width: 300px; display: inline-table; background: #dedede; padding: 5px; }
#widget div { float: right; width: 20px; margin-left: 2px; border: 1px solid #ccc; text-align: center; }
#widget h2 { padding: 0; margin: 0; font-size: 16px; }
</style>
</head>
<body>
<div id="widget">
<div>3</div><div>2</div><div>1</div>
<h2>Some pretty long title splitting on second line goes here.</h2>
</div>
</body>
</html>
