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

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -