html - 100% width header fixed with two div's -


i'm trying create fixed header sticks top on scroll. have 1 wrapper (#topbarwrapper) should fit 100% across entire browser. have div wrapper (.topbarcontentwrapper ) inside the(#topbarwrapper) includes logo , navigation (#mainnav). 1 floats left , other floats right. both float should seems if when browser resized, divs move. want 2 divs floating inside centered entire page. layout responsive body width 90%. spent several days trying figure out including research. appreciated.

ideal goal have header 100% width fixed , centered.

layout view: http://s30.postimg.org/so036qarl/screen_shot_2014_03_10_at_1_53_42_am.jpg

html:

     <body>          <div id="topbarwrapper">                            <div class="topbarcontentwrapper">               <a href="http://link" title="fvfg" id="topbarlogo"></a>               <nav id="mainnav" role="navigation">                 <h2 class="hidden">main site navigation</h2>                  <?php if ($this->countmodules('nav')): ?>                  <jdoc:include type="modules" name="nav"   />                  <?php endif; ?>                </nav>            </div>    </div>              <div id="mobilelogo"></div>              <div id="imageshow">         </div>          <div class="wrap">              <div class="miscellaneousrow">                </div>                 <div class="search">                </div>             </div>              <section><h2 class="hidden">recent news</h2>            <article id="recentnews">               <jdoc:include type="component" />            </article>            </section>              <aside>                <div class="sidebox">    <section>                    <h1 class="sideheader">mailing list</h1>                   <div class="signup">                </section>   </div>               <div class="sidebox">   <section>                </section></div>            <div class="tabviewtabs">    <section>               </section>                </div>      </aside> 

        <footer id="mainbottomfooter">            <div class="footerfloatleft">             <h1 class="hidden">footer</h1>               <div class="floatone">                </div>            </div>          </footer>           <div class="secondbottomfooter"> <div class="secondbottomfooterright">                     <nav id="sidenav">                       <ul>                         <li>                          <a href="http://www.link.com" target="_blank">l</a>                        </li>                         <li>                                     <a href="http://www.link.com" target="_blank">f</a>                        </li>                         <li>                            <a href="https://link.com" target="_blank">g</a>                        </li>                         <li>                            <a href="http://link.com" target="_blank">x</a>                        </li>                         <li>                            <a href="about.asp">!</a>                        </li>                     </ul>                  </nav>                 </div>             <div class="secondbottomfooterleft"> content</a></div>             </div>   </html> 

body {     width:90%;     margin:0 auto;     min-width:1024px;     max-width:1580px;      }    .latest-post clearfix{     display:hidden;}  .imageshow {     position:relative;     width: 100%;   }   .blog-readmore{     font-size: 24px;     display: inline;     width: 180px;     text-transform:uppercase;     margin-top:20px;   }    .blog-readmore a:link{     font-family: arial;      color: #690000;      } .blog-readmore a:visited{         color: #690000;  }  .blog-readmore a:hover{         color: #eee;  }    #topbarwrapper{     position:fixed;     left: 0px;     right: 0px;     background-color:#000;     z-index:1000;     text-align:center;  }  .topbarcontentwrapper {     display:block;     height:50px;     background-color: #1e1e1e; width: 90%;     margin: 0 auto; }           #topbarlogo {      background-image:url("http://strip2.png");     background-repeat:no-repeat;    display:block;           float:left;     height:50px;     width:250px;       text-indent:-9999px; }   aside{         background-color: #d6d6d6;     width: 29.1%; padding-left:1%;  height: 100%;     float: right;     overflow: none;         color: #fff;                         font-size:10px;                 padding-bottom:1000em; margin-bottom:-1000em }               /* blog content */    #recentnews {     width: 65.1%;     float: left;     padding-right:2%;     padding-left:2%;     padding-bottom:2%; background-color:#fff; padding-bottom:1000em; margin-bottom:-1000em;     }   .wrap{ overflow:hidden; background-color:#fff; }  /* ~~ bottom footer ~~ */ #mainbottomfooter{      background-color:#000;     position:relative;     height: 300px;         clear: both;         padding:15px 0;         min-width:100%;      }   .footerfloatleft li{      list-style-type: none;     padding-bottom: 1em;         padding-top: 1em;      }     .footerfloatleft a:link{     font-size:12px;     color: #555555;     text-transform:uppercase;}   .footerfloatleft a:visited { font-size:12px;     color: #555555;     text-transform:uppercase;}      .footerfloatleft a:hover { font-size:12px;     color: #690000;     text-transform:uppercase;}        /* ~~ p~~ */  p{             font-size: 17px;         color: #000;          line-height:140%;     font-family: 'helveticaneue';     padding-left: 1%;     padding-right:1%;     font-weight:bold;        }  h3 {         margin-bottom: 0px; font-size: 2em; color: #690000; font-family: 'lato', sans-serif; font-weight:300; text-transform:uppercase; padding-bottom:1em; padding-top:1em;   }     .floatone {     float:left;         padding-right: 4em;             padding-top: 4em;             height: 100%;}   .floattwo {      float:left;     height: 100%;         padding: 4em;}   .floatthree {     float:left;     height: 100%;         padding: 4em;}   .floatfour {     float:left;     height: 100%;         padding: 4em;}   .signup {         width:100%;}      .footerfloatleft { width:100%; float:left;    }   .secondbottomfooter {     width: 100%;     height:40px; background-color:#690000; border-top:1px solid #222; border-bottom:1px solid #222; color: #fff; font-size: 12px;  padding-top:2em; padding-bottom:2em; text-align:right;   }   h2 {font-face:arial;     font-size:12px;     color: #fff;     padding-top: 1em;         padding-bottom: 1em;}   #sidenav {       }   #sidenav li { display:inline;  }     #sidenav a:link{     font-family: 'socialicoregular', arial, sans-serif;     font-size:5em;     color: #eee;     text-decoration:none;      } #sidenav a:visited{         color: #fff;         text-decoration:none; }  #sidenav a:hover{         color: #690000;         text-decoration:none; }  .miscellaneousrow {     background-color: #000;     width: 100%;     height:100px;         position:relative; }          .twitterfeed {float:left;             padding-top: 10px;                 padding-bottom: 10px;                 width: 65.1%;                                 }              .search {                 float: right;                 padding:2%;                 width: 26%;}       #mainnav { float:right; }  .sidedivider {     background-color:#222;     height:auto;     margin-bottom:10%;     padding-top:10%;     padding-bottom:5%;     padding-left:5%;     padding-right:5%;     }    .tabviewtabs {     background-color:#222;     height:auto;     margin-bottom:20%;     padding-top:10%;     padding-bottom:5%;     padding-left:5%;     padding-right:5%;     }   .sidebox {     background-color:#222;     height:auto;     margin-bottom:10%;     padding-top:10%;     padding-bottom:5%;     padding-left:5%;     padding-right:5%;     text-align:center;     }    .soundcloud {     background-color:#222; position:relative;     height:auto;         clear: both;         padding:15px 0;         min-width:100%;        }   .soundcloudtitle { font-family: 'droid serif', serif;         color: #fff;         font-size: 2em;         text-align:right;         text-transform: uppercase;                 margin-bottom: 1em;             border-bottom: 5px solid #690000;       }  .secondbottomfooterright p{      padding-right:3em;     padding-bottom:1em;     }  .hidden      {   position: absolute !important;   clip: rect(1px 1px 1px 1px); /* ie6, ie7 */   clip: rect(1px, 1px, 1px, 1px); 

}

you're setting left , right positions of topbarwrapper 0px instead of 5%.

see this fiddle.

edit: see mean. i've updated the fiddle. should need.

edit #2: alrighty. forgive me, didn't notice earlier. you've assigned body width in percent min , max width in pixels. if remove min , max widths you'll see behavior you're looking for, think should assign 70% width .wrap , give margin:0 auto;


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -