I know IE7 & IE8 supposedly have support for using multiple CSS class selectors, but I can't seem to get it to work.
CSS:
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
}
.two.column {
width: 140px;
}
.three.column {
width: 220px;
}
.four.column {
width: 300px;
}
HTML:
<div class='two column'>Two Columns</div>
<div class='three column'>Three Columns</div>
<div class='four column'>Four Columns</div>
It always end up using the .four.column rule. Any ideas on what I'm doing wrong?
You want to make sure and use a doc type so you do not render in quirks mode. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
border: 1px solid;
}
.two.column {
width: 140px;
}
.three.column {
width: 220px;
}
.four.column {
width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>
Not that you're necessarily doing anything wrong, but if you just have classes like:
.column {
float: left;
display: block;
margin-right: 20px;
width: 60px;
}
.two {
width: 140px;
}
.three {
width: 220px;
}
.four {
width: 300px;
}
Then you should still get the rendering you want when you apply those classes in the right order:
<div class='column two'>Two Columns</div>
If you think of the css classes being like programming classes, the .two class extends the base .column class, over-riding its width property.
This way, you can also apply your .two, .three and .four classes to other page elements whose width you want to fix to those sizes, without having to be reliant on their position or container on the page.
