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="snap"> ... </div> </div> </div> <div id="block_2"> <div class="box_copy"> ... <div class="snap"> ... </div> </div> <div class="box_copy"> ... <div class="snap"> ... </div> </div> <div class="box_copy last"> ... </div> </div> <div id="block_3"> <div class="box_copy"> ... <div class="snap"> ... </div> </div> <div class="box_copy"> ... <div class="snap"> ... </div> </div> <div class="box_copy"> ... <div class="snap"> ... </div> </div> <div class="box_copy last"> ... <div class="snap"> ... </div> </div> </div> </div> </div>
#block_1
{
float: left;
width: 20em;
margin-left: 10.5em;
}
* html #block_1
{
display: inline;
}
#block_2
{
float: left;
width: 10em;
margin-left: -30.5em;
}
/* weirdness with the IE posse - reload causes the
bottom-aligned elements in the non-longest columns to
shift upwards as if they were the second longest column
was the longest
this is totally due to the media query.
And even more weirdly changing the font size makes things
"normal" again. Resizing the viewport does not have any effect
Of course, the media query hack is needed just because
Opera can't position a crate of ale on a brewery palette
*/
@media all and (min-width: 0px) {
#block_2
{
margin-left: -31em;
padding-left: 0.5em;
}
}
#block_3
{
float: left;
width: 10em;
margin-left: 0.5em;
}
.box_copy
{
border: solid 0.25em #666666;
padding: 0.5em;
margin-top: 0.5em;
background: #889988;
}
#block_1 .box_copy
{
background: #aabbaa;
}
.snap p
{
margin: 0;
padding: 0;
text-align: right;
}
.last .snap p
{
padding: 0 0.75em 0.5em 0;
}
/* '* html' to filter only IE Win */
/* Start Mac IE5 filter \*/
#block_1 .last, #block_2 .last, #block_3 .last
{
padding-bottom: 1000em !important;
margin-bottom: -998em !important;
}
* body #block_1, * body #block_2, * body #block_3
{
padding-bottom: 30000px !important;
margin-bottom: -30000px !important;
}
.last .snap
{
position: absolute;
bottom: 0;
border-bottom: solid 0.25em #666666;
}
* html .last .snap
{
bottom: -1px;
}
#block_1 .last .snap
{
width: 20em;
left: 10.5em;
}
#block_2 .last .snap
{
width: 10em;
left: 0;
}
#block_3 .last .snap
{
width: 10em;
left: 31em;
}
/* End Mac IE5 filter */
#wrapper_extra
{
position: relative;
}
* html #wrapper
{
/* bizarrely necessary for IE6 ! */
position/**/: relative;
}
#wrapper
{
width: 41.5em;
overflow: hidden; /* This hides the excess padding in non-IE browsers */
display: inline-block; /* Fixes nasty Opera7 scrolling bug */
}
/* easy clearing */
#wrapper:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* end easy clearing */
h2, p
{
margin: 0;
padding: 0;
}