1. Add a few paragraphs of text to the web page, placing them inside the wrapper div.
2. Add some backgrounds and style the wrapper div.
body {
background: #666666;
}
#wrapper {
Using absolute positioning to center a box onscreen
Note that it??™s possible to use the min-width property to set the minimum width of a
div. In all cases when using max-width and min-width, be sure to test the usability of
your design at a wide range of browser window sizes. Also, these properties are not
understood by Internet Explorer 6; see Chapter 9 for workarounds.
PAGE LAYOUTS WITH CSS
269
7
background: #ffffff;
border: 4px solid #000000;
padding: 20px;
width: 400px;
height: 300px;
}
3. Position the div. Set the wrapper div??™s position value to absolute, and the top
and left values to 50%. This sets the top-left position of the div to the center of
the browser window.
#wrapper {
background: #ffffff;
border: 4px solid #000000;
padding: 20px;
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
270
4. Use negative margins. Clearly, the div is not positioned correctly as yet, and
that??™s??”as mentioned in the previous step??”because absolute positioning and the
top and left values specify the position of the top left of the element they??™re
applied to. In order to place the div centrally, negative top and left margins are
used to pull it into place, the values of which are half the width or height, depending
on the margin in question.
Pages:
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370