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:\[code\]<!DOCTYPE HTML><html lang="eng"><head> <meta charset="UTF-8" /> <title>GARY MANN LLC</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/14540027/styles/gmann.css" type="text/css" /></head><body><header><center>GARY MANN LLC</center><center>Residential Contractor</center></header><nav><ul> <li><a href="http://stackoverflow.com/">Home</a></li> <li><a href="http://stackoverflow.com/about">About Us</a> <ul> <li><a href="http://stackoverflow.com/crew">Our Crew</a></li> <li><a href="http://stackoverflow.com/history">History</a></li> <li><a href="http://stackoverflow.com/vision">Vision</a></li> </ul> </li> <li><a href="http://stackoverflow.com/products">Services</a> <ul> <li><a href="http://stackoverflow.com/carpentry">Carpentry</a></li> <li><a href="http://stackoverflow.com/waterproof">Waterproofing</a></li> <li><a href="http://stackoverflow.com/concrete">Concrete</a></li> <li><a href="http://stackoverflow.com/masonry">Masonry</a></li> <li><a href="http://stackoverflow.com/prop">Property Maintenance</a></li> <li><a href="http://stackoverflow.com/metal">Metal Construction</a></li> <li><a href="http://stackoverflow.com/design">Interior Design</a></li> <li><a href="http://stackoverflow.com/demo">Demo & Salvage</a></li> </ul> </li> <li><a href="http://stackoverflow.com/services">Portfolio</a> </li> <li><a href="http://stackoverflow.com/contact">Contact</a> <ul> <li><a href="http://stackoverflow.com/email">Via Email</a></li> <li><a href="http://stackoverflow.com/contact_form">Web Form</a></li> <li><a href="http://stackoverflow.com/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>\[/code\]CSS:\[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\]
how to add multiple images to a css header?
- Thread starter SpankY353
- Start date