Layout basics

  • Use ID styles to create div layout:
    • <div id="wrapper">
      <header>Website title and logo</header>
      <nav>Menu goes here</nav>
      <article>All your stuff goes here</article>
      <footer>Copyright stuff goes here</footer>
      </div>
      *reference the new html5 tags
  • Right now it looks like this:
  • Now add these styles:
    #wrapper { background-color: #FFE0BD; width: 400px; margin-right: auto; margin-left: auto; color:#404040}
    header { font-size: 18px; background-color: #D8EFDB; height: 50px; width: 100%; }
    nav { background-color: #CCC; float: left; width: 100px; }
    article { background-color: #FFFEE9; float: left; height: 150px; width: 300px; }
    footer { background-color: #E0C5C5; height: 30px; width:400px }
  • You should have a layout that looks like this...however look at the footer:


    All your stuff goes here
    Copyright stuff goes here

    *note how the layout is center aligned...look at the margin value for the #wrapper
    **also note that #nav and #article are side by side using the float value
  • Replace the html code with this:
    <div id="wrapper">
    <header>Website title and logo</header>
    <section>
    <nav>Menu goes here</nav>
    <article>All your stuff goes here</article>
    </section>
    <footer>Copyright stuff goes here</footer>
    </div>
  • Replace the CSS with this:
    #wrapper { background-color: #FFE0BD; width: 400px; margin-right: auto; margin-left: auto; color:#404040}
    header { font-size: 18px; background-color: #D8EFDB; height: 50px; width: 100%; }
    nav { background-color: #CCC; float: left; width: 100px; }
    article { background-color: #FFFEE9; float: left; height: 150px; width: 300px; }
    section { overflow: auto }
    footer { background-color: #E0C5C5; height: 30px; width:400px }
  • What just happened?
  • Check out how to make columns

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#wrapper { background-color: #FFE0BD; width: 400px; margin-right: auto; margin-left: auto; color:#404040}
header { font-size: 18px; background-color: #D8EFDB; height: 50px; width: 100%; }
nav { background-color: #CCC; float: left; width: 100px; }
article { background-color: #FFFEE9; float: left; height: 150px; width: 300px; }
section { overflow: auto }
footer { background-color: #E0C5C5; height: 30px; width:400px }
</style>
</head>

<body>
<div id="wrapper">
<header>Website title and logo</header>
<section>
<nav>Menu goes here</nav>
<article>All your stuff goes here</article>
</section>
<footer>Copyright stuff goes here</footer>
</div>
</body>
</html>