Chris has an interesting example of Blueprint CSS framework not working. The code looks like it should work, but it doesn’t. And since it was me who recommended Blueprint CSS to him, I felt like I had to understand what’s going on. Or at least find a working solution. First, I tried his code snippet, and indeed it wasn’t working.
<div class="container">
<div class="span-24 last">
<div class="span-4 first">4</div>
<div class="span-10">10</div>
<div class="span-10 last">10</div>
</div>
</div>
It was breaking the last DIV into a line of its own, which is not what you or I would expect. After a few minutes of going back and forward, I started with an empty HTML file and started copying Blueprint CSS examples one by one, trying to figure out how to make it work. And here is the code that did it for me.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blueprint Test</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="container">
<div class="span-4">4</div>
<div class="span-10">10</div>
<div class="span-10 last">10</div>
</div>
</body>
</html>
The biggest two differences between the version that works and the version which doesn’t seem to be an additional DIV with “span-24 last” classes, and the “first” class added to the first content DIV.
With this I have to agree with Chris, that it should have worked.