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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -