Positioning Elements CHAPTER 3 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)

The Box Model  The Box Model describes the rectangular boxes generated for each and every HTML element  Boxes are laid out on the page according to the Visual Formatting Model (VFM)  VFM is primarily controlled by three properties:  position: defines the positional relationship between elements on the page  display: determines whether elements stack on top of each other, sit side by side, and even if they are actually shown or not on the page  float: provides additional positioning options, and can be used to organize elements into multi-column layouts 2 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)

How Does a Box Look Like?  Using the developer toolbox, we saw how HTML elements occupy a rectangular space on the page, but we needed the toolbox to get any visual sense of the box, because:  The background was transparent  There were no borders to the box  The main properties of the boxes are:  border: is the “marker” of the edges of a box  You can set the thickness, style, and color of a border  padding: is the space between the border and the content of the box  margin: is the space outside the box, separating this box from the other adjacent elements (boxes)  Because a box has four sides, properties associated with borders, padding, and margin have four settings: top, bottom, right, and left  E.g., margin-top, border-right, etc.  You can set borders, margins, and padding, separately and differently for the four sides of the box CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 3

Border properties  Borders have three properties:  width: values can be: thin, medium, thick, or any non-negative width unit (except %)  style: values can be: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset  color: values can be any legal construct for a color (see last chapter)  To avoid having to write 12 rules for every box, we have shorthad:  Use the main property with one, two, or four values (order is top, right, bottom, left – i.e., clockwise from top)  E.g., {border: 1px 2px 3px 4px} – to set 4 different values for the for sides of the border  E.g., {border: 1px 2px} – when a value is missing, the value for the opposite side is assumed (top and bottom 1px, right and left 2 px)  E.g., {border: 4px} – when only one value is specified, it applies to all sides  You can specify all three properties for all four sides (most common case) like this:  E.g., {border: 2px dashed red}  Lastly, more specific rules have priority, so you can set 3 sides of a box like this:  {border: 2px dashed red}  And: {border-right: 0} CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 4

Default Border Properties  {border-style: none} – that’s why borders don’t show by default  {border-width:medium} – the meaning of values like medium, thin, thick are browser dependent  {border-color:black}  So the simplest way to show a border is to add a rule that changes the style to something other than none  E.g., say you wish to put a red border around special paragraphs containing a warning;  Code p.warning {border:3px ridge red;} in the style section  … and Important Warning! to insert such a warning  Notice the box extending to the full width of the window CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 5

Padding  Unless you specify padding, content always touches the border (padding is set to 0 by default)  When the border does not show, reasonable spacing does still appear, because of margins CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 6 Padding Example p.nopad {border:3px solid red; width:220px;} p.pad {border:3px solid red; padding:5px; width:220px;} Without any padding, the text touches the border. With padding, the text looks much nicer.

Margins  As opposed to padding, margins default to non-zero values  The easiest way to understand them is to look at the example to the right: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 7

Margin Collapse  Vertical margins collapse:  Margins overlap until one of the margins touches the border of the other element  In other words, between two adjacent margins of different sizes, the smaller one disappears  This happens so that a succession of boxes with the same margins, space the same with the first and last element  Horizontal margins do not collapse  The space between two adjacent horizontal boxes equals the sum of their respective margins CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 8 “Neutralize” margins and padding by having this line at the top of your style sheet (or section): * {margin:0; padding:0;} Then set padding and margins for different elements as you wish to see them.

How Big Is a Box?  If the width of an element is not specified, its box will expand to fill the widths of the containing element.  Of course, the width property always exists, but it is set to the default value auto (for automatic) which gives us the default behaviour shown  Adding borders, margins and padding, reduces the width for the element content correspondingly, possibly increasing the height  Note: the style was completed with adding a background color, so that we can see the box even without a border  p {margin:0; background-color:white;} CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 9

Setting the Width of a Box  If the width of an element is specified, its content will always occupy the stated width  {width:400px;}  Adding borders, margins and padding, will increase the overall width of the element correspondingly CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 10

Document Flow  So far, we learned that:  All elements are rendered in a box  Boxes can stack on top of each other, or go side by side  This is known as the document flow  Think of it as a conveyor belt delivering box after box the page creator, who simply places them in the space available according to the default rules for the type of box  Clearly we need some ways to arrange boxes in more flexible ways  Three ways to achieve that:  Floating  Positioning  The display property CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 11

Floating  Floating is a mechanism to remove a box from the document flow, and “float” it as if it would be located on a separate layer (imagine it like rendering on separate transparent sheets layered on top of each other).  Essentially, floating “pushes” a box as far as possible to one side of its parent’s box (specified as we have seen earlier by the word values left and right)  Floating also changes the behaviour of other elements:  Elements following a floated element will move up right next to the floated element  E.g., If you float an image, a paragraph following it will not stack below (as usual) but will go to the right of the image; if the text is long enough, once it exceeds the lower edge of the picture, it will again start from the left edge, creating the effect of a text floating around an image, hence the name of this technique  You can revert elements to standard document flow placement by setting the clear property of the element CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 12

A Floating Example  Styling an image element with:  img {float:left; margin:0 4px 4px 0;}  … and a paragraph element with:  p {margin:0; border:1px solid red}  … yields the image on the right  In this case the parent is body  The paragraph no longer succeeds the image, but it rather takes up the same position as the image (top left corner of the window), but it “makes room” for the image CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 13 When you float a box, you must set up its widths. Of course, images have a default width, so that’s OK.

Setting Up Columns  If you float a paragraph following a floated element, it will not wrap around the image, but instead it will keep its defined width  This creates a column structure to the page  Style like this to create the image on the right:  img {float:left; margin:0 4px 0 0;}  p {float:left; width:200px; margin:0; border:1px solid red}  Columnar layout: if a set of sibling elements:  Are floated  Have their width property set  There is enough room  … they line up besides each other forming columns  You can use sibling sections to create columns, which you can then fill with whatever you want CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 14

Side-effects of floating  Floated elements are no longer contained in the box of their parent  That can lead to unexpected (and unwanted) consequences CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 15 Three Ways to Enclose Floated Elements section {border:1px solid blue; margin:0 0 10px 0;} footer {border:1px solid red;} p {margin:0;} img {float:left;} It's fun to float. Here is the footer element that runs across the bottom of the page.

Enclosing a floated element  To avoid the unwanted side-effects we need to force the enclosure of a floated element into his parent’s box  Three ways to do it:  Specify {overflow:hidden;} in the parent’s style  Float the parent too  Add a non-floated, empty element as the last child, and set it’s clear property  E.g., add an empty division like  … and set it’s style like.clear-me {clear:left;}  There are other ways too, but we’ll leave it at that (in the textbook, you can skip to the position property section)  You need all three techniques, because all have their own side-effects  If one technique does not work, try the others  The last technique usually works best CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 16

Static Positioning  The position property determines where a box is displayed relative to where it would normally appear in the document flow  It has four values: static (default), relative, absolute, and fixed  To illustrate, we will use a four paragraph page; default positioning is where the normal document flow dictates CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 17 Static Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff;} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph

Positioning Context  If you change the position property to anything other than the default value static, you are positioning the element relative to another element; this other element is known as positioning context.  By default, the positioning context is the whole page (i.e., the body)  The new position can also be adjusted using four position modifiers:  top specifies an offset measured downwards from the top edge of the relevant enclosing box  right specifies an offset measured to the right from the left edge of the relevant enclosing box  bottom specifies an offset measured upwards from the bottom edge of the relevant enclosing box  left specifies an offset measured to the left from the right edge of the relevant enclosing box  Negative values do the same in the opposite direction CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 18

Relative Positioning  Setting the position property to relative moves the box the specified amount(s), relative to where it would have gone with a default static positioning CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 19 Relative Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:relative; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph

Absolute Positioning  Setting the position property to absolute moves the box the specified amount(s), relative to its positioning context CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 20 Absolute Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:absolute; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph

Fixed Positioning  Setting the position property to fixed is the same as setting it to absolute, except:  Fixed positioning is always relative to the whole page (i.e., body)  Fixed positioning does not scroll the element off the page CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 21 Fixed Positioning p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;} body {background-color:#caebff;} p#special-para {color: red; background:#fff; position:fixed; top:25px; left:30px} First paragraph Second paragraph Third paragraph (with ID) Fourth paragraph (add a few more paragraphs like these…)

The display Property  In the first class we stated that elements can be classified as:  Block elements, which stack on top of each other vertically and use up the entire width of their parent  Inline elements, which line up horizontally one after the other as long as there is space on the current “line” of elements  This is known as the display property  Default values depend on the element:  p, blockquote, section, etc. have the default display property value of block  img, a, span, etc. have the default display property value of inline  You can change the value of the display property  Another value you can use is none – making this element, and all its children to be removed from the display, together with the space they occupy (as if they never existed in the HTML).  Another property, {visibility:hidden;} achieves a similar outcome, except that in this case the space is maintained CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 22

Backgrounds  Every element’s box has two layers:  Foreground, which is taken up by the actual contents of the element  Background, which can be set to a color and an image  Here is a tri-dimensional model of how this works CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 23

Background styling  {background-color:red;} – sets the background of the box to the specified color  {background-image:url(photo.jpg);} – lays the photo specified on top of the background color  If the photo is smaller than the box, the image is repeated left to right, then down, to fill the box, very much like tiling a wall  On the right and bottom edges, the image may be truncated  You can change that by setting:  {background-repeat:repeat-x;} to repeat the image only horizontally (in effect creating a fancy top border)  {background-repeat:repeat-y;} to repeat the image only vertically (in effect creating a fancy left border)  {background-repeat:norepeat;} to not repeat the image at all (in effect creating a corner image)  {background-repeat:round;} to resize the image such that it will fill the box in complete rows and columns of the image  {background-repeat:space;} to space the repeated images such that they distribute evenly across both dimensions of the box CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 24

Background Position  The background-position property defines the origin point of the image used as background, relative to the element, using two properties  For horizontal positioning, use right, left, or center  For vertical positioning, use top, bottom, or center  By default, the element and the image are aligned top left (i.e., the tiling begins from the top left corner, and continues right and down)  The order of the words is interchangeable (top left is the same as left top)  center center can be abbreviated as center  You can also use numbers to place the first tile at the given offset from the top left corner  You can also use % values (too complicate to make it worthwhile) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 25

Background Position Examples  Here is the outcome of different background-position values using a blue circle as the background image. CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 26

Background Size  When you use an image as a background, the image file has an implicit size in pixels, and that is the size used for tiling the box.  You can also specify different values for image size:  {background-size: 50%;} – sets the size to fill 50% of the box  {background-size: 100px 50px;} – sets the size as specified  {background-size: cover;} – sets the size to fill the box  {background-size: contain;} – sets the size so that the image fits inside the box  Obviously, some of these values make more sense for no repeat backgrounds  The image to the right shows the effect of these size settings on a no repeat centered background image CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 27

Background Attachment  By default, when you scroll a browser window, any backgrounds move with the scroll  You can change that by setting the background-attachment property to fixed  {background-attachment;fixed;} will keep the image in place while you are scrolling the contents  It probably makes sense for the background of the entire body (it may look funny for a smaller box)  All background properties can be shorthanded in a single rule, like this:  body {background: url(watermark.jpg) center #fff no-repeat contain fixed;}  Unspecified properties obviously take the default value  There are a few other background related properties, but thay are relatively new, nor widely supported, and somewhat complex, so we will skip over them  In the textbook you can skip the remainder of chapter 3 starting with the heading “Other CSS3 Background Properties”. CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 28