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

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 no开发者_运维知识库thing I've tried so far works reliably.

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/

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

Without Javascript 33.33% is going to always give you <100% total when added up.

What about 3.5%. Can you afford to lose a pixel or two from the right?

Or put a solid background behind (guessing your answer to this one will be no - but possible)

Have you tried something like this...

html, body{
    margin:0;
    padding:0;
}

div{
    float:left;
    height:100px;
    width:33.33%;
    background:red;
    margin:0;
    padding:0;
}

Example: http://jsfiddle.net/jasongennaro/jQA2Z/

EDIT

To get rid of that very small space at the right, wrap the divs and use a background-color or background-image to compensate.

div#wrapper{
  height:100px;
  background:red;
}

Example 2: http://jsfiddle.net/jasongennaro/jQA2Z/1/

My work around for this problem has always been as follows:

1. Wrap the 3 columns in a row
2. Have the first 2 columns occupy 33.333333% of the width
3. Finally, select your last column using the last-child filter and apportion a width of 33.333334% (Note that you can apportion the 33.333334% to any of the columns - the first one using first-child filter or second one using the nth-child filter)

Here's the HTML/CSS code

.row {
	width: 100%;
}
.row .cols {
    width: 33.333333%;
    height: 150px;
    float: left; 
}
.row .cols:last-child {
      width: 33.333334%;
}

<div class="row">
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
</div>
<div class="row">
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
</div>

I'm not sure any of the above answers are correct, even two years later. This is what I always use to achieve three columns. It requires a couple unique classes, but there is no extra pixels or percentages needed.

HTML:

<div id="column-wrapper">
    <div class="column left">
    </div>

    <div class="column mid">
    </div>

    <div class="column right">
    </div>

    <div style="clear:both;"></div>
</div>

CSS:

#column-wrapper {
    width: 1000px;
}
.column {
    width: 320px;
    float: left;
}
.column.mid {
    margin: 0px 20px;
}

This is specifically for a 1000px wide layout, but you can change the math to any layout needed. They key is to make the width of each column a number that when subtracted from the entire width of the div, the resulting number is equally divisible by 2.

For instance, if you wanted to do a 800px wide layout, your columns could be, say, 250px. That means that all three columns added together equal 750px, leaving you with 50px of total space left. So divide 50px by 2 and you get 25px, which is then what you put for your left and right margins on the center column.

Hopefully that makes sense, IMO it is the best and more simple way to achieve three equal columns with pure CSS.