Abstract
Individual elements form a layout when they are put together on a page. Using CSS we rely on the box model to control the width and behavior of each element without the layout. To control how elements place themselves in relationship to each other, we can use properties such as display and float. In this chapter we define the box model and look at float, flex, inline-block, and grid for specific layouts.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Notes
- 1.
Mastering Margin Collapsing. (August 4, 2019). Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
- 2.
8 Box Model. (August 4, 2019). Retrieved from www.w3.org/TR/CSS22/box.html
- 3.
Display. (August 4, 2019). Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/display
- 4.
Inline elements. (August 4, 2019). Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
- 5.
Block-level elements. (August 4, 2019). Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
- 6.
Cascading Style Sheets, level 1. (December 17, 1996). Retrieved from www.w3.org/TR/CSS1/#float
- 7.
CSS Grid Layout MOdule Level 1: 7.2.3. Flexible Lengths: the “fr” unit. (August 5, 2019). Retrieved from www.w3.org/TR/css3-grid-layout/#fr-unit
- 8.
Web Content Accessibility Guidelines (WCAG) 2.0, Meaningful Sequence. (August 7, 2019). Retrieved from www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence
- 9.
Media Queries Level 4. (August 9, 2019). Retrieved from www.w3.org/TR/mediaqueries-4/
Author information
Authors and Affiliations
Rights and permissions
Copyright information
© 2020 Martine Dowden and Michael Dowden
About this chapter
Cite this chapter
Dowden, M., Dowden, M. (2020). Layouts. In: Architecting CSS. Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4842-5750-0_4
Download citation
DOI: https://doi.org/10.1007/978-1-4842-5750-0_4
Published:
Publisher Name: Apress, Berkeley, CA
Print ISBN: 978-1-4842-5749-4
Online ISBN: 978-1-4842-5750-0
eBook Packages: Professional and Applied ComputingProfessional and Applied Computing (R0)Apress Access Books