html - Div and Button element collision when floating -
i have following code
<div class="site-branding"> <h1 class="site-title"><a href="http://localhost/test/" rel="home">test</a></h1> </div> <button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">navigation</button>
on css, put site-branding float left , menu-toggle float right. on normal resolutions, display good. brand @ left side of header , menu-toggle @ right when screen gets smaller, want menu toggle button below site-branding div behavior got menu-toggle colliding site-branding div. ideas how resolve this? thank you.
float ignore element's collision box. have use media queries apply new css header when screen small.
for example, if branding 300px wide , toggle 60px wide, should use media query of max-width: 360px
, target css file place toggle below branding image.
Comments
Post a Comment