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

Multi-column layouts  Most webpages use multi-column layouts in order to maximize “above the fold” content  Three basic approaches to multi-column layouts:  Fixed width (column sizes do not change when user changes browser window size)  Most common width is 960px, because most monitors can accommodate that, and the number 960 is divisible with many numbers making it easier to get nice and even column width (2x480, 3x320, 4x240, 5x192, 6x160, etc.)  Fluid (column sizes adjust as the user changes the browser window size, but element sizes do not)  Scales better with larger resolution monitors, but you give up control on the precise layout, because elements change relative positions as the window size changes  Elastic (column sizes adjust as the user changes the browser window size, while element sizes zoom)  Very difficult to manage, will not be covered in this course 2 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)

Layout Height  Normally you should not set the height of a layout (or of an element for that matter)  Content tends to change. If height is fixed, boxes will either:  Have empty space at the bottom, when content is less  Overflow the box when content is more  The content is either clipped or it floods adjacent boxes, depending on the value of the overflow property  If you leave the height property to its default value of auto, elements will expand or contract as needed  Content around it will also shift up and down  Look will remain compact (rather than showing gaps) CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 3

Layout Width  By contrast to height, width needs to be controlled  You want the content to fit in a reasonably sized browser window  Generally it is preferable to set the column size, but allow the elements in the column to expand to fit the column width  Block elements already do so by default CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 4

Structuring Content  Before we consider the layout of content on a page, we need to think about its structure  HTML5 uses new semantic elements, because they help with the automated analysis of web page content  They replace the extensive use of with more semantically meaningful tags  In HTML5 tends to be only used for generic purposes when no semantic tag fits CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 5

Creating a Column  Use the tag to set up a “wrapper” containing your layout  Style it, including a fixed width CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 6

Adding Another Column  To add a column:  Add another semantic tag to define your new structural unit  Set the width for all structural units such that they add up to the width of the wrapper  Float all structural units  E.g.: Add a navigation bar as the left column CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 7

A Two Column Layout CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 8

Let’s Add a Third Column CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 9

A Three Column Layout CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION) 10

Headers and Footers CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 11 Note: the only styling for and was background colour, so we can see it. Question: Why is the footer positioned “wrong”?

Using the clear property  Block elements following a floated element are pushed up and left as much as possible  This is to create the text floating around an image effect we have seen earlier in this course  Like we learned before, we can use the clear property to change this behavior  Add {clear:both;} or {clear:left;} to the styling of CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 12

Complete Example CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 13

Padding and Borders for Columns  Several things can change the actual space occupied by columns, and mess up the layout:  Adding margins (which you almost always want to add for esthetic reasons)  Adding content that forces a size wider than the column width:  A long text without spaces, such as a URL  An image  Here is what happens to the previous web page if you add {padding: 10px 20px;} to CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 14

Fixing the Slip  Three ways to fix the slip (in least recommended to most recommended order):  Adjust the width of the column to compensate for the padding  In the example we used, the width of would go down from 600px to 560px  Downside: you have to remember that every time you change padding, you need to adjust the width  Apply the padding and border to the elements inside the column  In this case to the paragraph inside  Keep in mind, it works only as long as the element inside the column is NOT fixed size  You will need to do so for every element in the column; can be tedious and error prone  Does not work well with borders  Best way: add a with {width:auto;} (that’s default, by the way) and add padding and borders to this new  Use the {box-sizing:border-box;} declaration on every column  Has the effect of the box behaving like un un-sized box, i.e., margins and borders are taken from the content space CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 15

Using the Inner  Add a of class inner and change styling for as follows: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 16

Using the box-sizing Property CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 17

Protecting Against Oversized Elements  We dealt with margins and borders, but oversized elements like images or URLs can still cause problems  Here are some options:  Use the img {max-width:100%;} to force the browser to resize images to fit in the column  Of course, you may limit that, as in article img {max-size:100%;}  Use the {word-wrap:break-word;} style declaration on your columns to avoid problems with extra long words (like URLs)  Careful though… words are not broken according to normal hyphenation rules  Use the {overflow:hidden;} style declaration for each column  It will cause clipping of oversized content CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 18

Tables  HTML tables are a way to structure content in a table format  Tables consist of:  Table data elements  A “wrapper” for all the table elements in a row  A “wrapper element for the entire table  From a presentation perspective:  Rows pick up the height of the largest table data element  The cells of the table align  By setting the display property of a semantic element to table-cell you can get the browser to display the content in a columnar format, without the need for wrappers, inner divs, etc.  If you leave a column un-sized, you get a fluid layout CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 19

A Fluid 3-column Layout  Here is the easiest way to create this layout:  Start with the example from slide 13  Replace all instances of float:left; with display:table-cell;  Delete the width:600px; from the style for  Add padding to each column, as desired  This works only post IE7 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 20

A More Complex Example CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 21

Content The HTML for the content of this page would have an overall structure like this: CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 22

Multiple Elements  As page layouts get more complex, the same tags (like or show up many times  Often we want different styles, hence the tendency to slap a class id on every item  Philosophically wrong: classes are meant to identify things that have common characteristics, not to distinguish between different instances of the same tag  A better approach (shown) is to add IDs at the top level of each main section  Contextual selectors can then be used to specify different styles for different tags of the same kind CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 23

CSS for Row 4  Using section ID feature_area in a contextual selector with article we can style all 3 boxes  Having used “wrapper” tags of class inner for the articles in this row, we can now style all three with one set of rules  Anything requiring individual styling (in this case borders) can then use the structural pseudo class nth-child to do so  Reading selectors in the style rules provide a clear image of where the rules apply CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 24

Using Inner s  The use of inner s has been seen as an option for setting margins that avoid the affecting column width  This use is valid, but as we have seen, other options exist for achieving that purpose  Inner s are useful however beyond the margin issue, because they can be used very well for the purpose of styling different sections differently CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 25

How Can I Find the Syntax I Need?  The best source is the W3School at  Three tabs help you navigate to:  Tutorials  References  Examples  You can find pretty much anything you need on this website CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION) 26