html - Floating a logo to left using only Css -
i want have nav bar this
but far i've done far, when try float logo left header background vanishes. confused why happening?
*{margin: 0;padding: 0;} img, fieldset{border: 0; } img{vertical-align: middle} h1,h2,h3,h4,h5,h6{font-weight: normal;} .site-body, .site-header-outer, .site-header, .tag{ width: 58.7em; margin:auto; } *{margin: 0;padding: 0;} img, fieldset{border: 0; } img{vertical-align: middle;} h1,h2,h3,h4,h5,h6{font-weight: normal;} .site{ width: 58.7em; margin:auto; } /*header*/ .header{ background-color:#3088f0; } .logo{ background-color: #f07a30; float: left; color: #ffffff; }<!doctype html5> <html> <head> <title>the title</title> <link href="css/stylesheet.css" rel="stylesheet"> </head> <body> <div class="site"> <h1> <div class="header"> <div class="logo">vatpaints.tk</div> </div> </h1> <div class="navigation"></div> <div class="content"></div> <div class="footer"></div> </div> </body> </html>
when using overflow:hidden; consider adding width: 100%;. browsers solution without width not work.
another solution problem clear float. can adding html element last child of container in elements floated. clear float using inline css adding style="clear: both;" attribute last child, or better use css class.
using inline css
<div class="header"> <div class="logo">vatpaints.tk</div> <div style="clear: left;"></div> </div> using css class
<style> .clear{ clear: left; /* clear: right; */ /* clear: both; */ } </style> <div class="header"> <div class="logo">vatpaints.tk</div> <div class="clear"></div> </div>
Comments
Post a Comment