Foundation HTML5 with CSS3

Page Layout with CSS Or declare all four sides at once with the shorthand border property (note that the order of the three valu ...

Chapter 9  outset: the opposite of inset, this reverses the lighting effect so the box appears raised from the page surface. Fi ...

Page Layout with CSS lot of screen real estate in wider windows that could easily display more content. That may be an aesthetic ...

Chapter 9 Liquid Width A liquid width layout (also called fluid or dynamic) has its width specified using percentages rather tha ...

Page Layout with CSS Liquid layouts require some additional planning and testing to build in some allowances for boxes to contra ...

Chapter 9 The original purpose of the float property was simply to wrap text around an image, just as you’ve seen before. A floa ...

Page Layout with CSS Listing 9-2. Applying opposite floats to form adjacent columns .main { width: 60%; float: left; background- ...

Chapter 9 Figure 9-6. When floating elements are too wide to fit in the available space, later floating elements drop under prev ...

Page Layout with CSS Figure 9-7. The columns float side by side with more room to breathe Clearing Floats This is working out pr ...

Chapter 9 The clear property instructs the browser to not allow any floats to descend below the element, nor or any content to f ...

Page Layout with CSS some padding, a darker background, and a dotted border so you can see the collapsed container that would ot ...

Chapter 9 This works like a charm, except for one major drawback: the outer floated container may then need clearing of its own ...

Page Layout with CSS We could show you a screen capture of the results, but it looks exactly like Figure 9-11. The overflow decl ...

Chapter 9 pseudo-element. If you need your float-based layout to display properly in web browsers more than a decade old you mig ...

Page Layout with CSS no offset. The element’s new position is relative to where it would have been before it was repositioned, b ...

Chapter 9 Figure 9-13. Our starting point for the positioning to come We can offset that image from its current location by addi ...

Page Layout with CSS .avatar { float: left; position: relative; right: 17px; bottom: 17px; padding-right: 15px; padding-bottom: ...

Chapter 9 .avatar { position: absolute; right: 15px; bottom: 15px; } Figure 9-16 shows the result—perhaps not quite what you exp ...

Page Layout with CSS Figure 9-17. The positioned image is now inside the box due to its new positioning context The positioned e ...

Chapter 9 Figure 9-19. Absolutely positioned elements aren’t part of the normal content flow, so containers will behave as if th ...