title: Re-creating Google homepage
body: <p>Hello Stack Overflow community! I am a complete beginner to programming and am attempting to learn my way around HTML and CSS at the moment. One of the projects I am working on is to re-create the Google homepage without looking at the source code. I am struggling right now with positioning of various elements (logo, search box, footer). </p>
  
  <p>Can someone look at my code and tell me specifically why my positioning will not work on the three elements I mentioned?</p>
  
  <p>Also, is my HTML semantically correct when it comes to "id" and "class"? Here is the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="main.css"/&gt;
  
  &lt;title&gt;Google&lt;/title&gt;
  
  &lt;div class="container"&gt;
  
  &lt;nav id="nav"&gt;
      &lt;ul&gt; 
          &lt;li&gt;&lt;a href="#"&gt;+You&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Images&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Maps&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Play&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Drive&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/nav&gt;
  
  &lt;img src="https://www.google.com/images/srpr/logo4w.png" alt="Google" width=280     height=95/&gt;
  
  
  &lt;div id="sign"&gt;SIGN IN&lt;/div&gt;
  
  &lt;form&gt;
  &lt;input type="text"&gt; 
  &lt;/form&gt;
  
  &lt;div id="footer"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Advertising Programs&lt;/a&gt;&lt;li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Business Solutions&lt;/a&gt;&lt;li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Privacy &amp; Terms&lt;/a&gt;&lt;li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;+Google&lt;/a&gt;&lt;li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About Google&lt;/a&gt;&lt;li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  .container {
  width: auto;
  height: 600px;
  position: relative;
  }
  
  #nav {
  background-color: #333333;
  height:30px;
  
  }
  
  li a {
  text-decoration: none;
  font-family: arial;
  color: #ABABAB;
  float: left;
  padding: 5px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  margin-right: 13px;
  
  }
  
  img {
  margin-left: 130px;
  margin-top: 195px;
  }
  
  #sign {
  border: 2px solid #D94A4A;
  background-color: #D94A4A;
  height: 16px;
  width: 65px;
  float: right;
  margin-right: 40px;
  margin-top: 20px;
  border-radius: 3px;
  font-size: 11px;
  font-family: arial;
  text-align: center;
  color: white;
  font-weight: 600;
  padding-top: 7px;
  
  }
  
  input {
  width: 550px;
  height: 25px;
  border: 1px solid #3492F7;
  margin-top: 290px;
  margin-left: 670px;
  }
  
  #footer {
  position: relative;
  bottom: 0;
  font-family: verdana;
  display: inline;
  
  }
  </code></pre>