Two layouts, one page using the pseudo class :target

The gist:

CSS:

#main750 { 
 max-width: 960px; 
 height: 350px; 
 border: 1px solid red; 
 padding:10px; 
}
#main750:target { 
 width: 960px; 
 height: 350px; 
 border: 1px solid blue; 
}
.leftcol {
 width:20%;
 float:left; 
 border: 1px solid green;
 padding:10px;
 margin-right:10px;
}

HTML: <ul> <li><a href="test-target-pseudo.html#main750">target fixed-width blue border</a> <li><a href="test-target-pseudo.html">target variable-width red border</a> </ul> <div id="main750"> <div class="leftcol">left col</div> <div>content</div> </div>

The original past: One pseudo-class, one document, two layouts