Creating a responsive design involves setting widths based on percentages.
Check out the code in this jsfiddle : http://jsfiddle.net/1x3whaat/
HTML
<div id="header">
<div id="callout">
Call us: 0123 456 7890
Support: 0123 456 7890
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30434540405f424470475552435944551e535f1e455b">[email protected]</a>
</div>
<div id="logo">
<a href=""><img src="img/logo.png" alt="Logo" title="Logo" /></a>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Solutions</a>
</li>
<li><a href="">Consultancy</a></li>
<li><a href="">Support</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
<!-- /header -->
</div>
CSS
div#header{
max-width: 1600px;
width: 98%;
position: relative;
background: #ff99ff;
height: 150px;
}
div#header > div#callout {
width: 30%;
position: absolute;
top: 0px;
right: 0px;
background: #99ff99;
font: 4em;
}
div#header > div#logo > a > img {
height: 135px;
}
nav {
margin: 0;
padding: 0;
width: 60%;
position: absolute;
bottom: 0px;
right: 0px;
background: #066;
}
nav > ul {
list-style: none;
margin: 0 auto;
padding-right: 0;
}
nav > ul > li {
float: left;
border-left: 1px solid #c3b371;
border-right: 1px solid #c3b371;
border-bottom: 1px solid #c3b371;
border-top: none;
width: 13%;
}
nav > ul > li > a {
background: #fcf5d2;
display: block;
font-weight: normal;
font-size: 1em;
text-transform: uppercase;
color: #81673d;
text-decoration: none;
text-align: center;
height: 1.5em;
}
nav > ul > li > a:hover, nav > ul > li > a.active, nav > ul > li.active > a {
background-color: #482501;
color: #fff;
}
This is an image of how it currently looks:
Here is an image of the desired final result:
I've experimented with floats, padding, margins, and changing positions but haven't been able to achieve the desired layout. Can anyone provide some assistance?