CSS Transformations Messing Up Formatting, Need a Fix

Question

This is my site: saltpoint2014.com a pretty basic photo portfolio using lightbox. I have added a transformation to expand and add a border to images when they are hovered over, but whenever one is hovered over in the left column, the formatting gets messed up and it leaves a white space underneath the selected image. Does anyone have any ideas on what's causing this and what steps can be taking to resolve? Many thanks!
Here is my CSS:
'''/**********************
GENERAL
**********************/
body {
  font-family: 'Open Sans', sans-serif;
}
wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
a {
  text-decoration: none;
}
img { 
  max-width: 100%;
}
h3 {
  margin: 0 0 1em 0;
}
/**********************
HEADING
**********************/
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}
logo {
 text-align: center;
  margin 0;
}
h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}
/**********************
NAVIGATION
**********************/
nav {
  text-align: right;
 padding: 10px 0;
  margin: 20px 0 0;
}
nav ul{
  list-style: none;
  margin: 0 10px;
  padding: 0; 
}
nav li {
  display: inline-block;
}
nav a {
  font-weight: 800;
 padding: 15px 10px;
}
/**********************
FOOTER
**********************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}
.social-icon {
  width: 20px;
  height: 20px;
  margin 0 5px;
}
/**********************
PAGE: PORTFOLIO
**********************/
gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
  display: inline-block;
}
gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}
gallery img:hover {
  -webkit-transform: scale(1.15,1.15);
  border-style: solid;
  border-width: 10px;
  border-color: #238ca6;
}
.portrait {
    height: 200px;
    width: 683px;
    display: block;
    overflow: hidden;
}
.crop {
  width: 4%;
}
/**********************
PAGE: ABOUT
**********************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
/**********************
CONTACT
**********************/
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}
.contact-info a{
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px; 
}
.contact-info li.phone a {
 background-image: url('../img/phone.png'); 
}
.contact-info li.mail a {
 background-image: url('../img/mail.png'); 
}
.contact-info li.twitter a {
 background-image: url('../img/twitter.png'); 
}
/**********************
COLORS
**********************/
/* site body  */
body {
  background-color: #fff;
  color: #999;
}
/* green header */
header {
  background: #65bacf;
  border-color: #599a68;
}
/* nav backgroudn on mobile */
nav {
  background: #238ca6;
}
/* logo text */
h1, h2 {
  color: #fff;
}
/* links */
a {
  color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
  color: #116f86;
}
'''

Jason Anello · Accepted Answer

Hi Alex,
Another way you could solve this is by clearing the floats using nth-child similar to how it's done in the "How to make a website" course.
The problem you're having is that when you hover over the 1st image for example, it increases in height and extends down lower than the 2nd image.  This blocks the 3rd image from floating all the way to the left and it stays under the 2nd image.  The 4th image then drops down to begin the 3rd row.
If you have the 1st item in every row clear the floats then it should fix that problem. For a 2 column grid that would be the 1st, 3rd, 5th, etc...
The following nth-child expression will select those:
```css
gallery li:nth-child(2n+1) {
clear: left;
}
```
This only works for a 2 column layout. If you have media queries that change the number of columns then you'll need different nth-child expressions at those breakpoints.

Felix Yakubov · Answer

I thought about some better solution: Use box-sizing to make sure that the width of the gallery item doesnt exceed the width you wanted.

Felix Yakubov · Answer

It has something to do with the width percentage you used. Because you add 10px to the border but not leaving that extra percentage before hovering up. This creates an over 100% width, resulting in line break. 
```
gallery img:hover {
border-style: solid;
border-width: 10px;
border-color: #238CA6;
}
```
Try using pixels instead of percentages, check that every border, margin and padding is taken care of and then turn it into percents.
**** When I disable padding-top and left from the li item the problem is fixed. So like Ive said, calculate again

Welcome to the Treehouse Community

Looking to learn something new?

Alex Krawiec

Alex Krawiec

CSS Transformations Messing Up Formatting, Need a Fix

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

gallery img:hover {

3 Answers

Jason Anello

Jason Anello

Felix Yakubov

Felix Yakubov

Alex Krawiec

Alex Krawiec

Felix Yakubov

Felix Yakubov

Felix Yakubov

Felix Yakubov