No site found for codelikethis.herokuapp.com; using CodeLikeThis content.


 Slides

Layout Survey

"CSS is a series of failed attempts to center elements on a page." - Alex

Here we will discuss many ways to align HTML elements relative to each other & to the page.

TODO: sample source code and screenshots for each of these techniques to lay out a standard page (top nav, left nav, main, footer)

HTML 1.0

<table>
<img align='right'>

CSS 1.0

<div style='float: right'>

HTML5+CSS3

<nav>
 <ul style='.....'>
  <li style='......'>

todo; CSS to make lists inline and stack left

Bootstrap grid

HTML5+Flexbox

todo

HTML5+Grid

todo