I tried to float three images next to each other a 33% width. Why is there extra space on the right?

Question

I'm pretty new to CSS and I'm not sure how to solve this problem. When I try and left float my three images next to each other with no padding or margin and a 33% width I get extra space on the right. I believe it has something to do with the image not wanting to adjust properly, but since I'm not using them as background images I don't know how I would use the cover attribute. HTML for images:



        
            /* Body styles */
              body {
              background-color: white;
              font-family: ;
              margin: 0px auto;
              width: 100%;
              min-width: 1000px;
              max-width: 1400px;}
        
             /* Image styles */
              #box img {
              padding: 0px;
              float: left;
              width: 33%; }
        
            <div id="box">
                    <img src="box_social_bg.jpg" alt="Social link box" />
                    <img src="box_rewards_bg.jpg" alt="Rewards link box" />
                    <img src="box_franchise_bg.jpg" alt="Franchise link box" />
            </div>

score 5 · Accepted Answer · answered Jul 05 '17 at 23:31

33% * 3 = 99%. The 1% makes a difference. 33.33% will work better.

But I would use calc(100% / 3) instead.

body {
  background-color: white;
  margin: 0px auto;
  width: 100%;
  min-width: 1000px;
  max-width: 1400px;
}

#box img {
  float: left;
  width: calc(100% / 3);
}

<div id="box">
  <img src="https://i.stack.imgur.com/2C22p.jpg" alt="Social link box" />
  <img src="https://i.stack.imgur.com/2C22p.jpg" alt="Rewards link box" />
  <img src="https://i.stack.imgur.com/2C22p.jpg" alt="Franchise link box" />
</div>

I tried to float three images next to each other a 33% width. Why is there extra space on the right?

1 Answers1