title: Using display:inline to create horizontal bar
body: <p>I wanted to create a page with a top banner, a horizontal navigation bar, and two columns (one main column for article and one column for side links).However, I have a few problems:</p>
  
  <ol>
  <li>I used display:inline for the horizonal nav bar but it is still displayed as a vertical bar</li>
  <li>In the book I read, it says if I float the div #maincolumn left, the sidebar will automatically flow to the right but I see that it is overlapping with the video. Is there anyway I can use float right for this? </li>
  </ol>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; Green Tea vault &lt;/title&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/stylesheet.css"/&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section id="maincontent"&gt;
  &lt;div id="banner"&gt;
  &lt;img src="image/Greentea.jpg"/&gt;
  &lt;ul id="nav"&gt;
      &lt;li&gt; &lt;a href ="Home.html"&gt; Home &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href ="Cheesecakes.html"&gt; Cheesecakes &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href ="Cakes.html"&gt; Cakes &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href ="Drinks"&gt; Drinks &lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt; 
  &lt;h1&gt; Home of all the matcha goodness! &lt;/h1&gt;
  &lt;p&gt;
  &lt;iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/p&gt;
      &lt;div id="maincolumn"&gt;
  Match Tiramisu recipes 
  From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html
  
  INGREDIENTS
  
  Matcha Syrup
  3/4 cup water
  1/2 cup sugar
  1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.)
  
  DIRECTIONS
  1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil.         Simmer for 3 minutes and remove from heat. &lt;br&gt;
  
  2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.) &lt;br&gt;
  
  Now, moving onto the matcha sponge cake. &lt;br&gt;
  ...
  Assembling the Matchamisu. &lt;br&gt;
  
  16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.) &lt;br&gt;
  
  17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha. &lt;br&gt;
  &lt;/id&gt;
  &lt;div id="sidebar"&gt;![enter image description here][1]
  &lt;ul&gt;
      &lt;li&gt; &lt;a href ="Japanrecipes.html"&gt; Japan Recipes &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="Koreanrecipes.html"&gt; Korean Recipes &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="Parisrecipes.html"&gt; Paris Recipes &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="Germanrecipes.html"&gt; German Recipes &lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img {
  width:500;
  height:200;
  border: solid green;
  }
  ul #nav {
  list-style-type:none;
  margin:0;
  padding:0;
  }
  li {
  display:inline;
  }
  a, a:visited {
  display:block;
  /*width:60;*/
  text-decoration: none;
  text-transform: uppercase;
  color: #FFFFFF;
  }
  a:hover, a:active {
  background-color:#7A991A;
  }
  
  #maincontent {
  background-color:peach;
  position: absolute;
      left:50%;
      width: 300px;
      margin-left: -150px;
  }
  
  #maincolumn {
      float: left;
      width: 90%;
      margin-right: 3%; /add space between column/
      margin-left: 3%; 
  }
  
  #sidebar {
      position: absolute;
      top: 370px;
      right: 0px;
      width: 10%;
      background: #EEE;
  }
  </code></pre>