GD 65 Class 05A

Topics

CSS Based Layout
  • The short history
  • Normal Flow
  • Floats
  • Clears
  • Positioning
  • CSS Box Model
  • Margins
  • Padding

CSS Layout

The short history

Over the years, web page layout has evolved from the early years of table-based layouts to the current practice of CSS-based layouts. You may still encounter web pages built using a table-based structure. (Craigslist is an example). In the nineties, and even in the early 2000s, many browsers did not support CSS-based layout because they did not offer full support for CSS.

Since the late 1990s when Cascading Style Sheets were beginning to work in most browsers, web authors have been encouraged to avoid what’s called the use of “presentational HTML markup” with a move towards the separation of presentation and content.

What is “presentational HTML markup”

Presentational HTML markup basically means defining all your positioning and styling within the HTML page itself. A web page built with a table-based structure is an example of presentational HTML markup. Also, defining your styles “inline” — meaning, defining the styles within the HTML. For example, below is an inline HTML definition:

The big problem with presentational HTML markup is that making changes to the presentation (positioning and/or styling) of the content requires changing each and every web page within the site. In the example above, if you wanted to change the font face from “Arial” to “Times,” the code would need to be changed on each and every page of the site!

Can you imagine the time required to make this one change if the site is 100+ pages?

What does the “separation of presentation and content” mean?

The separation of presentation and content solves the problems of presentational HTML markup. When you create page layout, you can create an HTML pages containing all the CONTENT for the pages and you can create a separate CSS file containing all the PRESENTATION for the pages. Instead of defining styles inline, CSS can be used to create the styles. Below is an example of a snippet of code for the content in the HTML:

And, if you defined the <div> tag in a separate CSS file as follows:

When a change is needed, the advantage of separating presentation from content is made more clear. Using the example from above, “Arial” can be changed to “Times” in the external CSS file and this will change the font-face defined in the div named “content” throughout the entire site. If I have an 100 page site, you don’t need to change each and every page! — you can change the definition of the font-family property in the CSS file for the site and because the CSS file is linked to each and every page, the font-family is changed throughout the site.

This is the power of separating presentation from content.

Further exploration: If you want to see examples of designers who have created completely different designs using the same content, see the CSS Zen Garden website. Every page on this site uses the same content — the same HTML code. These completely different designs are created entirely by the designer’s creation of an unique CSS file.

In this course we will create CSS-Based Column Layouts.

Normal Document Flow

In the CSS layout model and in normal flow, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right (in left-to-right reading languages). Block elements stack up on top of one another and fill the available width of the browser window or other containing element. Inline elements and text characters line up next to one another to fill the block elements.

In short, for the most part, elements on a page will stack on top of one another. CSS allows us to position content using floats, clears, margins, and padding.

Floats

Simply stated, the float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. Floats are one of the primary tools of modern CSS-based web design, used to create 2 and 3 column layouts.

Please read the following about floats: http://css-tricks.com/795-all-about-floats/

Clears

If you’re going to be floating elements around, it’s important to know how to turn this off and get back to layout as usual. This is done by clearing the element that you want to start below the float. Applying the clear property to an element prevents it from appearing next to a floated element and forces it to start against the next available “clear” space below the float.

The best example of this is in the 2 and 3 column layout. The clear property is defined in the footer div so that the footer sits below the other columns.

Positioning

CSS provides several methods for positioning elements on the page. They can be positioned relative to where they would normally appear in the flow, or removed from the flow altogether and placed at a particular spot on the page. You can also position an element relative to the browser window and it will stay put while the rest of the page scrolls.

Static
This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow.

Relative
Relative positioning moves the box relative to its original position in the flow. The distinctive behavior of relative positioning is that the space the element would have occupied in the normal flow is preserved as an empty space.

Absolute
Absolutely positioned elements are removed from the document flow entirely and positioned with respect to the browser window or a containing element. Unlike relatively positioned elements, the space they would have occupied is closed up. In fact, they have no influence at all on the layout of surrounding elements.

Fixed
The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even when the document scrolls. Fixed elements are removed from the document flow and positioned relative to the browser window rather than another element in the document. It currently causes some hiccups on mobile devices.

CSS Box Model Diagram


Figure: Detail of the Box Model

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line – the dashed lines are added to help demonstrate the box model).

Margin

The margin is an optional amount of space added on the outside of the border. In reality, margins are always transparent, allowing the background of the parent element to show through.

Padding

The padding is the area held between the content area and an optional border. Padding is optional.

CSS Box Model

The term “box model” is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc.

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself – the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box.

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box).

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels – the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

In summary, to calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

Material about The Box Model from Added Bytes website. Content is licensed under a Creative Commons License.

Please watch the following videos


CSS Box Model Properties Part 1

CSS Box Model Properties Part 2

Leave a comment