Information Technology Reference
In-Depth Information
14
margin: 0 0 0 10em;
padding: 0 0 0.5em 0;
}
•
Fixing Browser Bugs
—This
.block-content
class identifies and repairs a problem Microsoft
Internet Explorer 6 has sizing width by percentage:
.block-content{
width: 100% !important;
width: 960px; /* for ie 6 */
min-width: 780px;
max-width: 1200px;
margin: 0 auto;
display: block;
}
While this
.mask-main
class fixes another bug in a more recent Internet Explorer version:
.mask-main {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;
overflow:hidden; /* This chops off any overhanging divs */
}
•
2-column vs. 3-column layouts
—Setting up columns is really just defining widths for them. Set
up classes for your columns (
col1
,
col2
, and
col3
). Define where the column starts in relation
to the left or right margin, and how wide it should be:
/*** 2 column layout ***/
#page.with-sidebar .mask-main .mask-left {
right:30%; /* right column width */
}
#page.with-sidebar .mask-main .col1 {
width:70%; /* left column width */
left:30%; /* right column width */
}
#page.with-sidebar .mask-main .col2 {
width:30%; /* right column width */
left:30%; /* right column width */
}
