CSS Layout & Position Methods

An exploration of stuff you probably already know by...some dude that works here.

Presented by

zOMG What is CSS?

CSS stands for Cascading Style Sheets

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language (duh).
  • CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.
  • The first CSS standard was adopted in 1996, but wasn't fully implemented until late 1999/early 2000.

Things that were "neat" in 1996:

Yeah, you're old*.





















*Okay not really, but WORK WITH ME HERE PEOPLE.

1995: 1 year BC (Before CSS)

Before the advent of CSS, page styling looked like this:


<h2><font color="red"><center>This is supposed to be red H2 text</center><font></h2>


"When I was your age, we coded styles inline with HTML attributes and deprecated tags like a bunch of savages!"

It was a nightmare for making large-scale changes, and led to frequent coding disasters that resmebled something like this

OH, THE HUMANITY!


Then some people got smart and did something cool and made something neat.

1996-1999(ish): CSS is a toddler
Keep away from sharp objects, outlets, and IE6-8

The W3C managed to get browser developers (Netscape, Microsoft, Opera) to adopt the standard, and suddenly things were peachy. CSS made layout and design more efficient.

Well, sort of.

CSS 1: A New Beginning

"A long time ago, in a consortium far, far away..."

  • CSS 1 was buggy and basically was about as fun as kissing a rabid badger.
  • It lacked controls for position, but had floats and clears.
  • It probably smelled bad.
  • Internet Explorer 5 (FIVE) for Macintosh was the first browser to have >99% implementation.





Wait, a Microsoft product designed for a Mac was the first to have 100% compliance?



CSS 2: The Internet Strikes Back
"If it isn't broke, it doesn't have enough features yet."

CSS 2/2.1 introduced concepts such as:

  • Position control (relative, absolute, etc.)
  • Pseudo-elements (:before, :after, :first-child)
  • Z-index
  • The Box Model!

CSS 2.1 managed to blow up the HTML Death Star (the <blink> and <marquee> tags), and by 2011, CSS 3 was old enough to fly an X-Wing fighter and do other cool neato things.

Alright, Genius, we get it.

Tell us how to not break things with this thing that does things with things.

"CSS is a lot like poop: it only rolls downhill."
- Some dude on the design team


CSS works from the top, down (from the highest level element: <html>, to the most infinitesimally granular elements within). You cannot traverse “up” the element tree from a descendant element.

This matters because:

  1. CSS can come from multiple sources:
    1. External stylesheet files
    2. Internal Style Declarations (<style> elements)
    3. Inline element styling
    4. Web browsers (default browser view settings)
    5. Users
  2. CSS has a Priority scheme that affects literally everything:
    1. !Important annotation
    2. Inline Styling (HTML "style" attribute)
    3. Media type (media queries)
    4. User defined styles (e.g. Developer Tools, Firebug, Browser settings)
    5. Selector specificity (e.g. Using IDs and/or Classes)
    6. Rule order (the most obvious application of "cascading")
    7. Parent inheritance (i.e. Inherited values; again, "cascading" at play)
    8. CSS property definition (CSS rule or inline style element)
    9. Browser default (W3C recommended standards)




Son I am confuse

Long story short: elements inherit all rules from their parent elements unless new values are declared. Rules and declarations placed later in a style declaration will override those preceding them.

Clear as Mud.

Now that I've thoroughly confused you, let's get even more complex.

CSS targets elements through selectors:

  • Universal (*)
  • individual elements (html, h2, div, etc.)
  • element attributes (id, class)
  • pseudo-classes (:hover, :focus, :active, etc.)
  • pseudo-elements (:before, :after, :first-line, :first-letter)
  • & combinations of all those.

Cool story, Bro

Why don't you tell it again?


"How does this affect layout and styles?" Well, there are three ways:
Normal Document flow (self-explanatory), Floats, and Position.

First up is Floats (and clears)

FLOATS(the CSS kind)!

There are three float states for HTML elements:


  1. Left - Floats content to the left of the document within the normal flow
  2. Right - Floats content to the right of the document within the normal flow
  3. None - NO FLOATS FOR YOU. This is the default state when float is not declared.

Content following floated elements will flow around them until reaching the bottom "edge" of the floated element(s) in question.

CLEARS...have a weird name!

Because non-floated elements normally flow around floated elements, the ability to force proceeding elements to flow behind floated elements created the need for a "clearing" control.


  1. Clear Left - Clears normal-flow content to elements floated left.
  2. Clear Right - Clears normal-flow content to elements floated right.
  3. Clear Both - Content is cleared to both sides.

.benches { clear: both; }

"...And the scuffle clears both benches in a hurry..."


CSS 3: Return of the Position (rule)

Is it just me, or are these Star Wars jokes getting out of hand?

Outside of floats, element position affects document layout more than anything else.

There are four values of element position:

  1. Static: The default value. The element is positioned in the normal flow.
  2. Relative: The element is positioned on a two-axis grid relative to the first static element preceding it (parent or previous sibling).
  3. Absolute: The element is positioned on a two-axis grid relative to its first non-static-positioned ancestor (usually the immediate parent element has relative positioning).
  4. Fixed: The element is positioned on a two-axis grid relative to the DOM/viewport, and is scrolling agnostic

Note: Relative, Absolute, and Fixed position elements cannot be floated.

Need a visual for all that gibberish?

"Dude, we learned this eleventeen years ago."
Okay, now let's put it to use.

So when should you use floats, and when should you use position?

  • Floats are best suited for dynamic content (e.g. body content, copy/images, sidebar content) that may have fluctuations in size, or when block-level properties are important to the structure and flow of the document (e.g. horizontal fluid navigation bars).
  • Positioning is best suited for instances where content is static and lives outside the structure or flow of the document (e.g. Search Bars, floating image captions, top-right/top-left navigation menus, etc.). Positioning gives an element autonomy from surrounding elements.

Floating generally requires more code, but has more flexibility than positioning.

Can you put that in visual format?

Sure. "Floats first, position second."

So that's it, eh?

Well, no, but there are some other neat things you should know that will help out when building layouts with CSS.

Reducing CSS Code Replication

Because typing the same thing twice is letting the terrorists win.

There are a few ways to reduce the amount of CSS necessary to style and format a web document:

  • Proper use of selectors
  • Using the "cascading" part of CSS
  • Shorthand
  • Organization

Smart Selector Usage
Direct Element Targeting

HTML5 has several elements that are quite useful for both structure and for targeting with CSS (and even JS).


By targeting as many of these as possible, you reduce the need for extra classes and/or ID selectors, which in turn reduces code bloat.

Smart Selector Usage
Efficient use of Classes & IDs

Ideally, ID selectors are for targeting, whereas Class selectors are for grouping.

#someElementObjectID {	  /* This can apply to one object ONLY */
	position: relative;
	width: 80%;
}

.someRandomClass { 	  /* This can be applied to any element as many times as you want, */
	display: block;	  /* much like an object attribute */
	padding: 1em;
	background: #333;
	font-size: 1.5em;
}

From a programming standpoint, IDs are procedural, whereas Classes are object-oriented.

Smart Selector Usage
Document Tree Traversal

Combining smart selector usage with document tree traversal, the amount of classes necessary for styling and layout is reduced significantly.

.someElement {
	float: left;
	margin: 1em;
	padding: 1em;
	background: #fff;
	border: 5px solid #000;
}
.someElement > p {
	font-size: 1.5em;
	line-height: 2em;
}
.someElement > p > span {
	color: #00f;
}
.someElement > p > a {
	text-decoration: none;
}

MOAR VISUAL AIDS


Syntax & Code Structure

"I don't have pet peeves, I have majorly psychotic hatreds..." -George Carlin

Everyone has their own style, and that's cool. But bad code syntax is hard to read, and a pain in the ass.

The VinSolutions style guide is available on Dev, and covers HTML, CSS, and JS.

CODE INDENTATION

This one is simple: Use proper indentation

.some-other-element {
	declaration: value;
}
@media only screen and (max-width: 940px) {
	.some-other-element {
		declaration: value;
	}
}
<div class="some-other-element">
	<ul class="unstyled">
		<li>list item</li>
		<li>list item</li>
		<li>list item</li>
	</ul>
</div>

If you don't use proper indentation, you're letting the terrorists win. True Story.

MOAR BAD CSS PUNS

Fin.