CSS Layout

css is awesome

(CSS is Awesome mug created by Steven Frank, still available for purchase on Zazzle)

Inline vs. Block Level Elements

This is where things start to get a little bit tricky - positioning HTML elements using CSS.

There are two main display rules (or "levels") for HTML elements.

  1. Block level
    • New line, full width
  2. Inline level
    • Same line, width of content

Inline vs. Block: More Info

Inline elements should only contain data, or other inline elements.

Block level elements can contain both block and inline elements.

CSS Display Property

Elements are given a default display value based on their type - this is a CSS property that determines an element's layout, and how it interacts with other elements.

See https://developer.mozilla.org/en-US/docs/Web/CSS/display for many more display values.

Example of Block vs. Inline Elements

Inherent display properties of commonly-used HTML elements.

Block Level Elements
div
p
table
form
ul, ol
nav
Inline Elements
span
a
i, em
b, strong
img
button

Positioning

There are 4 commonly-used position properties in CSS. These further help to position elements on a page. They also help to further confuse you as a developer.

  1. Relative - Elements are relative to the flow of the HTML document.
    • Elements moved around with the properties top, left, right, bottom. top:20px; will move a relatively positioned element 20 pixels from its natural postioning.
  2. Absolute - This is positioned relative to its parent or ancestor (closest ancestor that is relatively positioned).
    • Any element that is positioned absolutely, will be placed (using the top/left/right/bottom CSS properties) specifically within the parent, irrespective of other sibling elements.

mnemonic: positions are opposite of their common meaning

Positioning (cont.)

position: fixed example: CSS Fixed Positioning Illustration

Wrapper DIVs

In order to make content layout work in CSS, you often need to introduce wrapper divs.

For example, if you have an image with its own caption, and you want them to appear together and also have the caption positioned relative to the image, you might need to change this:

<img src='cow.jpg'>
<p class='caption'>This is a cow.</p>

Into this:

<div class='image-wrapper'>
  <img src='cow.jpg'>
  <p class='caption'>This is a cow.</p>
</div>

<style>
  .image-wrapper {
    position: relative;
  }
  .image-wrapper .caption {
    position: absolute;
    bottom: 0;
    margin: auto;
  }
</style>

https://www.flickr.com/photos/scott-teresi/7391832092

Floats (Intro)

Floating Cow

<style>
  .image-wrapper {
    position: relative;
    float: left;
  }
</style>

Now the caption can be as wide as its parent (the wrapper), since its parent is only as wide as its content (the image).

Float

Float Properties
left
right

CSS Float Property Illustration

TIP: applying clear: both to an element will make it skip down the page past all floats, left and right. This is usually done to a <br>

Float Explanation Video

YouTube user: tobyonline; Published on Dec 19, 2013; https://youtu.be/xara4Z1b18I

Floats (Advice)

LAB: Image Wrapping

Let's open our trusty "example-html" directory once more.

You should currently have two HTML files in this directory.

In this lab we'll be focusing on the index.html file, so open that up in VSCode

Lab: Make It Pretty

Now we've got a page with some wrapped images, a whole lot of text, and some links. Things are starting to get laid out, but our page still looks like something from the early 90s, and our navigation bar is far from ideal.

Let's spruce things up a bit!

Using the style tag we previously inserted into our index.html file do the following:

 Previous Next 

Outline

[menu]

/