html - What causes FireFox to shift a float left 50% width over? -
i have set of divs same width , height. set float left , 50% of container (the container 100% width of page). @ screen widths couple divs shifted on 50% though there element beside it.
<div class="container"> <div class="pod"> <img /> </div> <div class="pod"> <img /> </div> </div>
if adjust width of window can fix issue. happens @ multiple window widths , (from can see) in firefox.
i'll work on jsfiddle see if can replicate show it. until then, has dealt before , found issue?
----- edit ----- i'm able reproduce in chrome changing page width. it's more see in firefox.
if change boxes 50% 47% issue goes away...
----- edit ----- turns out "split" i'm doing causing issue.
two jsfiddles:
how divs respond (i forgot mention of divs "split". didn't think part of issue till now) http://jsfiddle.net/dcp3450/xvmhr/
how divs respond without split: http://jsfiddle.net/dcp3450/xzrgv/
i think nested "50%" causing rounding split items , causes issue. ideas on if that's true , how fix issue?
first if don't have it, firebug.
then use element inspector , start removing things dom. text may overflow height of division element try deleting text first , working way through parent elements.
this can tell without seeing (x)html , css.
you can set overflow
on division elements so...
<div style="overflow: scroll;"></div>
...or...
<div style="overflow: auto;"></div>
Comments
Post a Comment