how to add multiple images to a css header?

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:

HTML:

<!DOCTYPE HTML>
<html lang="eng">
<head>
    <meta charset="UTF-8" />
    <title>GARY MANN LLC</title>
    <link rel="stylesheet" href="styles/gmann.css" type="text/css" />
</head>

<body>
    <header>
        <center>GARY MANN LLC</center>
        <center>Residential Contractor</center>
    </header>
    
    <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a>
        <ul>
            <li><a href="/crew">Our Crew</a></li>
            <li><a href="/history">History</a></li>
            <li><a href="/vision">Vision</a></li>
        </ul>
      </li>
      <li><a href="/products">Services</a>
        <ul>
            <li><a href="/carpentry">Carpentry</a></li>
            <li><a href="/waterproof">Waterproofing</a></li>
            <li><a href="/concrete">Concrete</a></li>
            <li><a href="/masonry">Masonry</a></li>
            <li><a href="/prop">Property Maintenance</a></li>
            <li><a href="/metal">Metal Construction</a></li>
            <li><a href="/design">Interior Design</a></li>
            <li><a href="/demo">Demo & Salvage</a></li>
        </ul>
      </li>
      <li><a href="/services">Portfolio</a>
      </li>          
      <li><a href="/contact">Contact</a>
        <ul>
            <li><a href="/email">Via Email</a></li>
            <li><a href="/contact_form">Web Form</a></li>
            <li><a href="/pigeon">Carrier Pigeon</a></li>
        </ul>
      </li>
    </ul>
    </nav>
    
    <div id="wrapper">
        <section id="content">
            <!-- all the content in here -->
        </section>
        
        <section id="left_side">        
        </section>
    </div> <!-- end wrapper -->
    
    <footer>
        <div id="footer_center">
            <section id="social_links">
                <h3>Connect With Us</h3>
            </section>
            
            <section id="site_map">
                <h3>Site Map</h3>
            </section>
        </div>
        <div id="copy">
            <p>Copywright</p>
        </div>
    </footer>
</body>
</html>

CSS:

/* 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 */

Solution

You can achieve this by making classes.

.header{
   width:100%;
   height:20%;
   float:left;
   text-align:center
}
.logo{
   width:80%;
   height:100%;
}
   .upperlogo{
   background:url('path of the upper logo') 0 0 no-repeat;
   height:10%;
   width:100%;
}
.lowerlogo{
   background:url('path of the lower logo') 0 0 no-repeat;
   height:10%;
   width:100%;
}
.social-icons{
   width:20%;
   height:100%;
   float:right;
}

In your HTML:

<header class="header">
   <div class="logo">
      <div class="upperlogo"></div>
      <div class="lowerlogo"></div>
   </div>
   <div class="social-icon">
   ....
   </div>
</div>

Adjust the height & width to suit your images. Loading images through CSS is always the better-elegant way.