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
Post a Comment