filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
filler
Snap 1
This example forms part of the Position is Everything article, In Search of the One True Layout.
<div id="wrapper_extra"> <div id="wrapper"> <div id="block_1"> <div class="box_copy last"> ... <div class="verticalalign"> ... </div> </div> </div> <div id="block_2"> <div class="box_copy"> ... <div class="verticalalign"> ... </div> </div> <div class="box_copy"> ... <div class="verticalalign"> ... </div> </div> <div class="box_copy last"> ... <div class="verticalalign"> ... </div> </div> </div> <div id="block_3"> <div class="box_copy"> ... <div class="verticalalign"> ... </div> </div> <div class="box_copy"> ... <div class="verticalalign"> ... </div> </div> <div class="box_copy"> ... <div class="verticalalign"> ... </div> </div> <div class="box_copy last"> ... <div class="verticalalign"> ... </div> </div> </div> </div> </div>
#block_1
{
float: left;
width: 50%;
margin-left: 25%;
}
* html #block_1
{
display: inline;
}
#block_2
{
float: left;
width: 25%;
margin-left: -75%;
}
#block_3
{
float: left;
width: 24.9%;
}
#block_1, #block_2, #block_3
{
background-image: url(../images/backgrounds/sunken_tr.gif);
background-position: 100% 0;
background-repeat: no-repeat;
}
.box_copy
{
border-top: solid 4px #ffffff;
background-image: url(../images/backgrounds/sunken_tl.gif);
overflow: hidden;
}
.box_copy h2
{
padding: 12px 18px 10000px 18px;
padding: 12px 18px 3px 18px;
margin-bottom: -9997px;
margin-bottom: 0;
background-image: url(../images/backgrounds/sunken_tr.gif);
background-position: 100% 0px;
background-repeat: no-repeat;
}
/* Don't understand why, but IEs of all hues require this shifting */
* html .box_copy h2
{
background-position: 100% -4px;
}
.box_copy p
{
padding: 6px 18px 0 18px;
}
.verticalalign
{
background-image: url(../images/backgrounds/sunken_bl.gif);
background-position: 0 100%;
background-repeat: no-repeat;
}
.verticalalign p
{
text-align: right;
padding-bottom: 18px;
background-image: url(../images/backgrounds/sunken_br.gif);
background-position: 100% 100%;
background-repeat: no-repeat;
}
.last
{
/* p-b + m-b hacks for IE 5.01 */
padding-bottom/**/: 100em !important;
margin-bottom/**/: -97.5em !important;
}
div#block_1, div#block_2, div#block_3
{
/* p-b + m-b hacks for IE 5.01 */
padding-bottom/**/: 30000px !important;
margin-bottom/**/: -30000px !important;
}
@media all and (min-width: 0px) {
body #block_1, body #block_2, body #block_3
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#block_1:before, #block_2:before, #block_3:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
margin-top: -5px;
padding-top: 32000px !important;
margin-bottom: -32000px !important;
height: 0;
}
}
.last .verticalalign
{
/* p-b + m-b hacks for IE 5.01 */
position/**/: absolute;
bottom/**/: 0;
}
#block_1 .last .verticalalign
{
width: 50%;
}
#block_2 .last .verticalalign
{
width: 25%;
}
#block_3 .last .verticalalign
{
width: 24.9%;
}
/* hack for Operas */
@media all and (min-width: 0px){
#wrapper .last div.verticalalign
{
width: 100%; /* Opera 7.5 and 8 */
}
div[id^="wrapper"] #block_1 .last div.verticalalign
{
width: 50%;
}
div[id^="wrapper"] #block_2 .last div.verticalalign
{
width: 25%;
}
div[id^="wrapper"] #block_3 .last div.verticalalign
{
width: 24.9%;
}
}
/* hack for IEs of all hues */
* html .verticalalign
{
width: 100% !important;
}
#wrapper_extra
{
position: relative;
}
* html #wrapper
{
position: relative;
}
#wrapper
{
overflow: hidden; /* This hides the excess padding in non-IE browsers */
display: block; /* this time Operas 7 + 8 need block, not inline-block */
}
/* but that makes IE go crazy */
* html #wrapper
{
display: inline-block;
}
/* easy clearing */
#wrapper:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* end easy clearing */
h2, p
{
margin: 0;
padding: 0;
}