responsive center logo header with side navigation - html

Question

I am trying to create a responsive centered logo header with side navigation. because I want it to be responsive there are no fixed widths which makes it difficult to accomplish the centering (margin:auto). As the window becomes smaller I would like the li tags to sit on top of each other. I do not want to float left and float right the side navigations because I want them to be be attached to the sides of the logo not the sides of the window, with the same amount of space between logo and menu on left and right.
html:
<div id="header">
<div id="nav">
<div id="nav-inner">
<ul id="site_nav_1">
<li id="menu-item">
The Problem
</li>
<li id="menu-item">
Why Sanitize
</li>
</ul>
<div id="logo-nav">
<div id="logo"></div>
</div>
<ul id="site_nav_2">
<li id="menu-item">
About Us
<li id="menu-item">
Sanitize Now!
</li>
</ul>
</div>
</div>
</div>
http://jsfiddle.net/7PhJZ/74/

Answer 1

You need to use media queries and set different styles depending on breakpoints. I would suggest mobile first.
Very rough fiddle at http://jsfiddle.net/7CcjD/ - try changing the width of the Result box.
<div id="header">
<div class="menu-1">Menu 1</div>
<div class="logo">Logo</div>
<div class="menu-2">Menu 2</div>
</div>
div {border: 1px solid #999}
.menu-1 {border-color: red}
.logo {border-color: green}
.menu-2 {border-color: blue}
.menu-1, .logo, .menu-2 {
margin: 1em auto;
width: 80%
}
#header {text-align: center;}
#media only screen and (min-width: 640px) {
.menu-1, .logo, .menu-2 {
border-width: 2px;
width: 20%;
display: inline-block;
}
}

Answer 2

you could use inline-block instead floatting :
http://jsfiddle.net/7PhJZ/75/
#nav {
margin:auto;
display: block;
border: 1px solid green;
}
#nav-inner {
max-width:810px;
height:200px;
margin:auto;
display: block;
border: 1px solid grey;
white-space:nowrap;/* keep them on one line */
}
#header {
position: fixed !important;
overflow: visible;/* auto if fixed would be wised somehow */
padding: 0px;
width: 100%;
top: 0;
left:0;
border: 1px solid purple;
}
#logo-nav {
display: inline-block;
}
#logo {
border: 1px solid blue;
margin: 0px auto 0px auto;
width: 225px;
height: 124px;
}
ul#site_nav_1 {
display:inline-block;
border: 1px solid red;
text-align:right;
max-width:32%;
}
ul#site_nav_2 {
display:inline-block;
border: 1px solid red;
text-align:left;
max-width:29%;
}
li#menu-item {
display:inline-block;
padding:20px;
text-align: center;
}
a {
font-family:'gobold_boldregular';
font-size:25px;
text-transform:uppercase;
letter-spacing: 1px;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
/* some reset */
#logo-nav, #site_nav_1, #site_nav_2 {
vertical-align:middle;
}
ul, li {
padding:0;
margin:0;
white-space:normal;
}