JQuery Carousel disrupting the display: inline-block

The page is this:

link

The code is this:

echo "<div class='fotosProduto'>";
require_once "_required/carousel.php";
echo "</div>";


echo '    
  <div class="detalhesProduto">
    texto
  </div>';

Inside

require_once "_required/carousel.php";

You have a validation if there are photos for the product.

If there is, it displays the carousel, otherwise it displays a text saying it has no photos.

The problem is as follows:

You have placed the following style

  .fotosProduto, .detalhesProduto {
      display:inline-block;
      vertical-align:middle;
      width:400px;
      height:300px;
  }

  .fotosProduto {
      text-align:center;
  }

When you do not have photos for the product, the two div's stand side by side. But when there are photos and the carousel comes on the scene, then the right div goes down and I can not solve it!

plugin css:

/** Stage container **/

.connected-carousels .stage {
    width: 620px;
    margin: 20px auto;
    position: relative;
}

.connected-carousels .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.connected-carousels .photo-credits a {
    color: #fff;
}

/** Navigation container **/

.connected-carousels .navigation {
    width: 260px;
    margin: 20px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connected-carousels .carousel li {
    float: left;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    height: 400px;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
    height: 60px;
    width: 240px;
    background: #fff;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .carousel-navigation li {
    cursor: pointer;
}

.connected-carousels .carousel-navigation li img {
    display: block;
    border: 5px solid #fff;
}

.connected-carousels .carousel-navigation li.active img {
    border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width: 100px;
    height: 410px;
    color: #fff;
}

.connected-carousels .prev-stage {
    left: 0;
}

.connected-carousels .next-stage {
    right: 0;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    display: none;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
    display: none;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-stage span {
    left: 20px;
}

.connected-carousels .next-stage span {
    right: 20px;
}

.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
    display: block;
}

/** Navigation carousel controls **/

.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 16px/29px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-navigation {
    left: -15px;
    top: 22px;
    text-indent: 6px;
}

.connected-carousels .next-navigation {
    right: -15px;
    top: 22px;
    text-indent: 20px;
}

.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
    opacity: .5;
    cursor: default;
}