Dean Gibson Dean Gibson - 6 months ago 13
HTML Question

6 Square image take up 100% of 500px and stay same size

It was pretty tough naming this question or even just trying to explain what I'm looking for, so I've created a jsfille here that you can have a look at.

My HTML:

<div class="container">
<div class="full-width"></div>
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
<img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
</div>


My CSS:

.container {
width: 500px;
}
.full-width {
background: blue;
width: 500px;
height:100px;
}
.photo {
display: block;
float: left;
width: 16%; // 100% divided by 6
}


So I have 6 square images that need to line up in a row in a container of 500px width. This width cannot be modified. So, I made the width of each image 16% (100% divided by 6). But what ends up happening now is that it's not filling up the entire container. Which is pretty clear compared to an element that does fill up the entire with. The alignment is completely out then.

How can I achieve this?

EDIT

using
width: 16.6%;
is as close as it gets, but it still doesn't fill the container perfectly.

Answer

You can use the calc() function to achieve your goal.

.photo {
  display: block;
  float: left;
  width: calc(500px / 6);
}

Or set it to 16.666666666666666666666666666667%