Coding IQ icon

Download
& Install

Welcome!

  1. Atom Editor: http://atom.io
  2. Chrome Browser: https://www.google.ca/chrome

Workshop #4

Building a one-page website

Page Layout

CSS Float

To get block level elements to line up side by side, the stacking flow has to be broken first.

Use the float property with a value of left or right to align the element to either side. Any element after the floated element will move up beside it. Let's try it out in the example below.

placeholder image

Paragraph tag - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea id quasi iusto, ex cumque omnis iste eveniet mollitia corporis enim.

Center aligning with margin

margin can also be used to auto center align block level elements.

First, a width needs to be set. Then, setting the left & right values to auto will find the center of the page. The 0 just refers to the top and bottom value.

box