For the margin-left value, you need the negative of
half the horizontal space the div takes up, which is found by adding its width,
horizontal padding, and horizontal margin values (4 + 20 + 400 + 20 + 4 = 444),
dividing by two (222), and making the number negative (??“222). Similarly, the
margin-top value is the sum of the vertical dimensions (300px height, two lots of
20px padding and two lots of 4px borders, which comes to 344px) divided by 2 and
made negative.
#wrapper {
background: #ffffff;
border: 4px solid #000000;
padding: 20px;
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -222px;
margin-top: -172px;
}
PAGE LAYOUTS WITH CSS
271
7
Nesting boxes: Boxouts
Boxouts are design elements commonly used in magazines, but they can, in principle, also
be used on the Web. A boxout is a box separate from other page content that is often
used to house images, captions, and other ancillary information. In magazines, these may
be used for supporting text, alternate features, or magazine mastheads (with contributor
information). Online, this enables you to immediately present content that??™s complementary
to the main text.
In the following screenshot of the 2000 AD Books website (www.2000adonline.com/
books), a boxout is used to house thumbnails of upcoming books, with a link to a page
with further titles that are coming soon.
Note that if you use this kind of layout and have too much content for your wrapper,
it will spill out of it.
Pages:
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371