I'm in the process of designing a website utilizing the 960 Grid system.
The header consists of three parts: the logo, the navigation, and the login form.
I've implemented media queries to center both the logo and the login section when the page width drops below 1614 pixels. However, I'm encountering an issue where the logo centers properly but the div containing the login form does not align as expected.
Here is a screenshot with highlighted areas around the affected divs for better visualization.
Here's an attempted fiddle:
I'm uncertain about the root cause of this problem.
HTML
<div id="header">
<div id="logoHolder">
<a href="index.html">
<img src="images/Pinnacle_ira logo_web.png" alt="Pinnacle IRA" width="125" height="84"/>
</a>
</div>
<div id="loginHolder">
<form action="https://www.theiracenter.com/customerLoginAction.gsx" method="post" >
<label for="username">Username:</label>
<input class="topLogin" type="text" name="login" />
<br />
<label for="password">Password:</label>
<input class="topLogin" id="passwordText" type="password" name="password" />
<input type="hidden" name="pd" value="C05" />
<br />
<input type="submit" />
</form>
</div>
<br />
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li><a href="guidedChoice.html">GuidedChoice</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="investment.html">Investment Tools</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
CSS
/*Header*/
#logoHolder{
float:left;
}
#logoHolder img{
margin:5px;
margin-top:20px;
vertical-align:bottom;
}
@media (min-width:0px) and (max-width:1614px){
#logoHolder{
width:125px;
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}
#loginHolder{
float:right;
}
@media (min-width:0px) and (max-width:1614px){
#loginHolder{
display:block;
margin-left:auto;
margin-right:auto;
}
}
label{
font-family:Arial;
}
.topLogin{
width:175px !important;
height:20px !important;
}
#passwordText{
margin-left:22px;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
color:#888888;
margin-top:20px;
}
#navigation li:hover{
color:white;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
padding-bottom:3.5em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}