layout 3

this is the left sidebar!

if you take out either of the sidebars this code is a bit rubbish so you'll have to resize the remaining sidebar and main body, to do that go to the css and adjust the flex property (currently "0 0 180px" for the sidebars) so that the ones that aren't 0 add up to 780. (e.g. currently two sidebars of 180 + the middle bit of 420 = 180 + 180 + 420 = 780)

this is the middle!
first time using flexbox baybeeee this is basically like a modern version of an old-style theme im pretty pleased with it :)

if you put any text in the header or footer please make sure to use class="safe" if you don't want a space between the it and the top of the page (for header) or the body of content (for the footer) (if you do want that space then ignore this)

i understand that this is a really, really standard layout but i wanted to learn how to use flexbox and this seemed like a good option! i now understand it more than i did which is something lol. colours nabbed from a website i found for a local inn that hadn't been updated since about 2009.

the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yippee</title>
  </head>
  <body>
<style>
body {
  font-family:arial, helvetica, sans-serif; /* or custom font w/ URL but i'm staying true to that old web sort of theme here */
  background-color:#fef0c5;
  margin:0px;
}

.container {
  width:780px;
  height:100%;
  margin:0 auto;
}

.header {
  width:780px;
  height:180px;
  background-color:#e5d8b1;
}
  
  .safe {
    margin:0;
    padding:5px;
  }

.navbar {
  width:780px;
  height:auto;
  background-color:#e5d8b1;
  border-top:dotted;
  border-bottom:dotted;
}
  
main {
  display:flex;
}

.leftbar {
  max-width:180px;
  background-color:#c5c39c;
  display:inline-block;
  float:left;
  flex:0 0 180px;
  order:1;
}

.middle {
  max-width:420px;
  background-color:#fff;
  display:inline-block;
  margin:0 auto;
  flex:0 0 420px;
  order:2;
}

.rightbar {
  max-width:180px;
  background-color:#c5c39c;
  display:inline-block;
  float:right;
  flex:0 0 180px;
  order:3;
}

.footer {
  width:780px;
  height:auto;
  background-color:#e5d8b1;
  text-align:center;
  font-size:smaller;
}

a:hover {
  background-color:#ce982f;
}

p, h1, h2, h3, h4, h5, h6 {
  padding:5px;
}
</style>
<div class="container">
  <div class="header">
    <p class="safe">header content here babey! it can be anything you want - image, words, marquee, you can edit the height or just omit it altogether! flexible!</p>
  </div>
  <div class="navbar">
    <a href="#">link</a> // <a href="#">link</a> // <a href="#">link</a>
  </div>
<main>
    <div class="leftbar">
      <p>this is the left sidebar!</p>
    </div>
    <div class="middle">
      <p>this is the middle!
    </div>
    <div class="rightbar">
      <p>and this is the right sidebar!</p>
    </div>
  </main>
  <div class="footer">
	<p class="safe">yippeeeeeeee!!</p>
  </div>
</div>
  </body>
</html>

and this is the right sidebar!

if you want this to not be centre-aligned then go to the css and take out the "margin:0 auto" from the .container bit!