Position the boxout. To do so, you need to float it right and assign it a fixed width??”
if no width is set, the boxout will span the width of its container, which in this case
would be the width of the wrapper div. Margin values at the bottom and left
ensure that the boxout doesn??™t hug content that wraps around it.
.boxout {
float: right;
width: 180px;
margin: 0 0 20px 20px;
}
4. Add a background. As shown earlier, the boxout has
a background, and this is added by applying a background
image to the boxout that blends into a solid
background color. The background pair in the following
code block does this??”#e1e1e1 is a color
value taken from the top of the image; 0 100% positions
the image at the bottom left of the boxout
div; and no-repeat ensures that it doesn??™t tile.
Finally, padding values are added. The background
image is 200 pixels wide, and the assigned width of
the div is 180px. Therefore, horizontal padding of
10px is required. This ensures that the entire image
is shown and that the boxout content doesn??™t go
right up to the edge of the background.
.boxout {
float: right;
width: 180px;
margin: 0 0 20px 20px;
background: #e1e1e1 url(boxout-bottom.gif) 0 100% no-repeat;
padding: 0 10px;
}
PAGE LAYOUTS WITH CSS
275
7
5. The boxout header now needs styling, which will
add the second part of the background. A contextual
selector is used for this, ensuring that the style
only applies to level-two headings within an element
with a class value of boxout.
Pages:
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374