I have 3 block elements (2 navbars and one picture) in one container, all are floating and have a fluid width. The picture is in-between the navbars, so my left navbar and the pic have float:left and the right navbar has float:right.
My goal is to get the picture underneath the navbars on mobile devices. To do so I thought I just have to add float:none to the pic in my media query but the result is the right navbar positioning under the pic.
Is there maybe a way to re-arrange the divs in mobile-view?
Best solution would be a trick to tell the floating elements in which order they should float.
I think you’re looking for
clear:both.. anyways, here’s one way around it;you can adjust the width’s and what not, but you get the idea: Fiddle. Also, note that because all items are floating.. you can place the image AFTER both navbars & have it displayed in the center at larger widths.