Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width

Question

I have 3 square images of the same size that are floating next to each other. I want the three images, in total, to take up the full 100% of the browser window width, with no gaps. Giving each image a width of 33.33333333% works in Firefox, but does not work in most other browsers at certain widths, which can sometimes leave a small gap to the right of the 3rd image.

This may be a problem with many solutions, but nothing I've tried so far works reliably.

Answer 1

Try this:

HTML

<div class="container">     <div class="column">         <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />     </div>     <div class="column">         <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />     </div>     <div class="column">         <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />     </div> </div> 

CSS

html, body {     margin:0;     padding:0;     width:100%;     height:100%; }  .container {     width:100%; }  .column {     width:33.33333333%;     float:left; }  .column img {     width:100%;     height:auto; } 

Demo

http://jsfiddle.net/andresilich/2p8uk/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/show/

CSS3 demo

html, body {     margin:0;     padding:0;     width:100%;     height:100%; }  .container {     display:-moz-box;     display:-webkit-box;     display:box;     -moz-box-orient:horizontal;     -webkit-box-orient:horizontal;     box-orient:horizontal;     width:100%; }  .column {     -moz-box-flex:1;     -webkit-box-flex:1;     box-flex:1;     background-color:#ddd; }  .column img {     width:100%;     height:auto; } 

Demo

http://jsfiddle.net/andresilich/2p8uk/2/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/2/show/

---

Update: (safari, sorta, fix) Safari does not equate 33.33% to 100% like other browsers, you can either use my CSS3 demo, which does the sizing automatically through CSS, or you can encase everything inside a container with a 101% width and just hide that extra 1% with overflow:hidden; off of the third image. Try this:

<div class="container">     <div class="inner">         <div class="column">             <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />         </div>         <div class="column">             <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />         </div>         <div class="column">             <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />         </div>     </div> </div>  html, body {     margin:0;     padding:0;     width:100%;     height:100%; }  .container {     width:100%; }  .inner {     width:101%;     overflow:hidden; }  .column {     width:33.33333333%;     float:left; }  .column img {     width:100%;     height:auto; } 

Demo: http://fiddle.jshell.net/andresilich/2p8uk/4/

Answer 2

For those that come here now (oct 2015) you can use calc:

width:calc(100% / 3);

This will give you exactly 100% when added up. There are some browserbugs but you can use it without many issues: http://caniuse.com/#feat=calc