title: how to add multiple images to a css header?
body: <p>I am trying to add 2 images side by side in my header, following that I want my website title GARY MANN LLC and below that Residential Contractor, and then over on the right side of the header I want space to add social buttons/links.  How can I divide the space up in the cleanest manner using just css and html heres what ive got to work with:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="eng"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;GARY MANN LLC&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles/gmann.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  &lt;center&gt;GARY MANN LLC&lt;/center&gt;
  &lt;center&gt;Residential Contractor&lt;/center&gt;
  &lt;/header&gt;
  
  &lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/about"&gt;About Us&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/crew"&gt;Our Crew&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/history"&gt;History&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/vision"&gt;Vision&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="/products"&gt;Services&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/carpentry"&gt;Carpentry&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/waterproof"&gt;Waterproofing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/concrete"&gt;Concrete&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/masonry"&gt;Masonry&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/prop"&gt;Property Maintenance&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/metal"&gt;Metal Construction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/design"&gt;Interior Design&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/demo"&gt;Demo &amp; Salvage&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="/services"&gt;Portfolio&lt;/a&gt;
    &lt;/li&gt;          
    &lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/email"&gt;Via Email&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/contact_form"&gt;Web Form&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/pigeon"&gt;Carrier Pigeon&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div id="wrapper"&gt;
  
      &lt;section id="content"&gt;
          &lt;!-- all the content in here --&gt;
      &lt;/section&gt;
  
      &lt;section id="left_side"&gt;
  
      &lt;/section&gt;
  
  &lt;/div&gt; &lt;!-- end wrapper --&gt;
  
  &lt;footer&gt;
      &lt;div id="footer_center"&gt;
          &lt;section id="social_links"&gt;
              &lt;h3&gt;Connect With Us&lt;/h3&gt;
          &lt;/section&gt;
  
          &lt;section id="site_map"&gt;
              &lt;h3&gt;Site Map&lt;/h3&gt;
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;div id="copy"&gt;
          &lt;p&gt;Copywright&lt;/p&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* HEADER */
  *  {
  margin:0;
  padding:0;
  }
  
  header {
  width:100%;
  height:110px;
  background-color:#FF6600;
  border-bottom:2px solid black;
  }
  /* END OF HEADER */
  
  /* START NAV MENU */
  nav {
  background-color:#333333;
  height:40px;
  width:100%;
  float:left;
  position: relative;
  }
  
  
  nav ul {
  font-family: Sonoma, Arial;
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align:center;
  position: relative;
  float: left;
  clear: left;
  left: 50%;
  }
  
  nav ul li {
  float: left;
  position: relative;
  display: block;
  right:50%;
  
  }
  
  nav li ul { 
  display: none; 
  }
  
  nav ul li a {
  display: block;
  text-decoration: none;
  background: #666666;
  color: #ffffff;  
  padding: 5px 20px 3px 15px;
  margin-left: 1px;
  white-space: nowrap;
  height:30px; /* Width and height of top-level nav items */
  width:90px;
  text-align:center;
  border-right: 3px solid black;
  border-left: 3px solid black;
  border-top: 1px solid black;
  
  }
  
  nav ul li a:hover { 
  background: #999999; 
  }
  
  nav li:hover ul {
  display: block;
  position: absolute;
  height:30px;
  }
  
  nav li:hover li {
  float: none;
  font-size: 11px;
  
  }
  
  nav li:hover a { 
  background: #534635; 
  height:30px; /* Height of lower-level nav items is shorter than main level */
  }
  
  nav li:hover li a:hover { 
  background: #999999; 
  }
  
  nav ul li ul li a {
  text-align:left;
  }
  
  /* END NAV MENU */
  
  /* WRAPPER */
  #wrapper {
      width:100%;
      height:600px;
      background-color:#CCCCCC;
      margin-left:auto;
      margin-right:auto;
      border-left:1px solid black;
      border-right:1px solid black;
  }
  #content {
  width:85%;
  height:100%;
  float:right;
  background-color:#999999;
  }
  #left_side {
  width:15%;
  height:100%;
  float:left;
  background-color:#333333
  }
  
  /* END WRAPPER */
  
  /* FOOTER */
  footer {
  width:100%;
  height:170px;
  background-color:#e7e7e7;
  border-top:1px solid black;
  }
  #footer_center {
  width:900px;
  height:145px;
  margin-left:auto;
  margin-right:auto;
  border-bottom:1px dotted #333;
  }
  #social_links {
  width:435px;
  height:100%;
  float:left;
  border-right:1px dotted #333;
  
  }
  #site_map {
  width:435px;
  height:100%;
  float:right;
  border-left:1px dotted #333;
  }
  /* END FOOTER */
  </code></pre>