Home/ Questions/Q 7308203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T23:31:30+00:00

I have a problem with precise positioning of three equal divs. My humble knowledge

  • 0

I have a problem with precise positioning of three equal divs.

My humble knowledge of math reminds that 33+33+33=99%, and 1% is missed. Moreover, 33.33+33.33+33.33=99.99%, but browser compatibility does nothing with it.

<div id='products-choice-wrap'>
  <div id='products-choice'>
    <div id='choice1' class='three-bubbles'>
      <img src='/products/image1.png' alt='' />
    </div>
    <div id='choice2' class='three-bubbles'>
      <img src='/products/image2.png' alt='' />
    </div>
    <div id='choice3' class='three-bubbles'>
      <img src='/products/image3.png' alt='' />
    </div>
  </div>
</div>

And CSS:

#products-choice-wrap 
    { position: absolute; width: 100%; bottom: 0; 
    top: 100px; text-align: center; }
#products-choice      
    { position: absolute; width: auto; left: 40px; 
    right: 40px; margin: 0px auto; top: 0; bottom: 0; height: auto;
    max-width: 1080px; }
#products-choice div  
    { position: absolute; top: 20px; height: auto;
    overflow: auto; width: auto; padding-bottom: 200px; }
#products-choice #choice1.three-bubbles 
    { left: 0; right: 66.7%; }
#products-choice #choice2.three-bubbles 
    { left: 33.37%; right: 33.37%; }
#products-choice #choice3.three-bubbles 
    { left: 66.7%; right: 0; }

In this construction three images are situated in the center of the page in a row. In case of small resolution they become smaller while #products-choice becomes narrow. The attribute max-width prevents images from overzooming.

Positioning should be very precise because of smooth lines connections between them (see links to examples below). The problem appears when comparing different resolutions in different browsers. It looks like in Chrome such positions as 33.37% to 66.7% provide excellent picture both on resolution 1280x*** (#products-choice is max-width: 1080px) and smaller 1024x*** (#products-choice width becomes 929px). Click here for image.

IE and Firefox show a 1-px-gap between images, which disppears and appears again after browser size changing. Click here for image.

What can I do to say Chrome, IE and Firefox exact width (which is actually 1/3)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t achieve perfect 1/3 widths at all times with an elastic layout, so here’s what I suggest:

    Instead of using the position property to place your images, float:left them instead. This will ensure the three images are pressed up tight against one another, without the 1px gap appearing between them.

    The downside: Sometimes you’ll have a 1px gap to the right of the last image. You can sort of cover this up by assigning a background to the wrapper element, but in your case it seems like a better deal than having your images split apart.

    .three-bubbles {
    float:left;
    width:33.33333%;
}

    Demo: http://jsfiddle.net/qemUY/2

    I left a lot of your CSS in which wasn’t needed, because I don’t know all of your requirements, but if you take this approach, your current code can be trimmed down considerably.

    Simpler demo: http://jsfiddle.net/qemUY/4

    • 0