html - Why is "float: right;" eliminating the background color of the div that contains it? -
i'm trying 3 divs on same line, pushed off right, side-by-side. divs of class nav-button. can see right now, stacked on top of each other left, , div containing them has bluish background. add together float: right; nav-buttons, line want them to, reason containing div loses background color. explain why?
link: http://jaminweb.com/bestoflr.php
html:
<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"/> <link rel="stylesheet" type"text/css" href="lr_styles.css"/> </head> <body> <div class="outer-container"> <div class="header-container"> <div class="header-bluetop"> <div class="logo-blob"> <span>l</span> <span>e</span> <span>t</span> <span>s</span> <span>r</span> <span>u</span> <span>n</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span> </div> <div class="nav-container"> <div class="nav-button"> <h3>best posters</h3> </div> <div class="nav-button"> <h3>best posts</h3> </div> <div class="nav-button"> <h3>news</h3> </div> </div> </div> <div class="subheader"> </div> </div> <div class="middle-conatiner"> </div> <div class="footer-container"> </div> </div> </body> </html> css:
div.outer-container {font-family: "lato","droid sans",arial,verdana,sans-serif;} div.header-container {} div.header-bluetop { background-color: #00325f; position: relative; } div.logo-blob { position: absolute; top: 0px; left: 30px; width: 250px; height: 64px; background-color: #f8c525; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; font-size: 25px; font-weight: 100; line-height: 64px; text-align: center; letter-spacing: 0.5px; border: 5px solid #fff; } div.logo-blob > span { font-family: "droid serif",serif; font-size: 25px; font-weight: 100; } div.logo-blob > span:nth-of-type(2n) { color: #306ab5; } div.logo-blob > span:nth-of-type(2n+1) { color: #d42222;; } div.nav-container {} div.nav-container > div.nav-button { } div.nav-container > div.nav-button > h3:nth-of-type(2n+1) { color: #fff; } div.nav-container > div.nav-button > h3:nth-of-type(2n) { color: #f8c525; } div.subheader {} div.middle-container {} div.footer-container {} bonus point: why
div.nav-container > div.nav-button > h3:nth-of-type(2n+1) { color: #fff; } div.nav-container > div.nav-button > h3:nth-of-type(2n) { color: #f8c525; } not working?
because when float nav-button elements, container element has no in-flow elements within it, logo-blob beingness absolutely positioned.
overflow:hidden has additional benefit of clearing floats:
of course, there other ways clear floats.
as nth-of-type() selectors, applying them wrong element:
class="snippet-code-css lang-css prettyprint-override">div.outer-container { font-family:"lato", "droid sans", arial, verdana, sans-serif; } div.header-container { } div.header-bluetop { background-color: #00325f; position: relative; } div.logo-blob { position: absolute; top: 0px; left: 30px; width: 250px; height: 64px; background-color: #f8c525; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; font-size: 25px; font-weight: 100; line-height: 64px; text-align: center; letter-spacing: 0.5px; border: 5px solid #fff; } div.logo-blob > span { font-family:"droid serif", serif; font-size: 25px; font-weight: 100; } div.logo-blob > span:nth-of-type(2n) { color: #306ab5; } div.logo-blob > span:nth-of-type(2n+1) { color: #d42222; ; } div.nav-container { overflow:hidden; } div.nav-container > div.nav-button { float:right; } div.nav-container > div.nav-button:nth-of-type(2n+1) > h3 { color: #fff; } div.nav-container > div.nav-button:nth-of-type(2n) > h3 { color: #f8c525; } div.subheader { } div.middle-container { } div.footer-container { } class="snippet-code-html lang-html prettyprint-override"><div class="outer-container"> <div class="header-container"> <div class="header-bluetop"> <div class="logo-blob"> <span>l</span> <span>e</span> <span>t</span> <span>s</span> <span>r</span> <span>u</span> <span>n</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span> </div> <div class="nav-container"> <div class="nav-button"> <h3>best posters</h3> </div> <div class="nav-button"> <h3>best posts</h3> </div> <div class="nav-button"> <h3>news</h3> </div> </div> </div> <div class="subheader"></div> </div> <div class="middle-conatiner"></div> <div class="footer-container"></div> </div>
html css
No comments:
Post a Comment