Вывод текста из БД сдвигает блок

258
06 декабря 2017, 23:11

Мучаюсь с этой проблемой уже почти два дня. Пишу на Bootstrap 3, страница без вывода текста выглядит так:

А после того как добавляю вывод блок с кнопкой покупки сползает вправо и появляется горизонтальная прокрутка:

Пытаясь решить эту проблему нагородил кучу стилей но особого эффекта это не принесло. Собственно сам код:

<html>
  <head>
    <!-- Bootstrap -->
    <link href="engine/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="engine/snippets/vam.md.css" />
    <link rel="stylesheet" href="engine/snippets/slidemenu.css" />
    <?php include 'engine/modules/sql-app-get-info.php';
    $product_id = $_GET['id'];
    $products = mysqli_query($connect, "SELECT * FROM shop_lots WHERE id = '$product_id'");
    $prod_result = mysqli_num_rows($products);
    $tags = mysqli_query($connect, "SELECT * FROM tags WHERE game_id = '$product_id'");
    if($prod_result=='false'){
        echo '<meta http-equiv="refresh" content="0;URL=404.php">';die;
    }
    ?>
  </head>
  <?php foreach($products as $product): ?>
  <title><?=$product['title'] ?></title>
  <style>
.glyphicon { margin-right:5px; }
.thumbnail {
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px
}
.item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover {
    background: rgb(105,65,152)
}
.item.list-group-item .list-group-image {
    margin-right: 10px
}
.item.list-group-item .thumbnail {
    margin-bottom: 0px
}
.item.list-group-item .caption {
    padding: 9px 9px 0px 9px
}
.item.list-group-item:nth-of-type(odd) {
    background: #eeeeee
}
.item.list-group-item:before, .item.list-group-item:after {
    display: table;
    content: " "
}
.item.list-group-item img {
    float: left
}
.item.list-group-item:after {
    clear: both
}
.list-group-item-text {
    margin: 0 0 11px
}
/* style snippet */
#thumbnail-preview-indicators {
 position: relative;
 overflow: hidden;
}
#thumbnail-preview-indicators .slides .slide-1, 
#thumbnail-preview-indicators .slides .slide-2,
#thumbnail-preview-indicators .slides .slide-3 {
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
}
 #thumbnail-preview-indicators,
 #thumbnail-preview-indicators .slides,
 #thumbnail-preview-indicators .slides .slide-1, 
 #thumbnail-preview-indicators .slides .slide-2,
 #thumbnail-preview-indicators .slides .slide-3,
 #thumbnail-preview-indicators .slides .slide-4,
 #thumbnail-preview-indicators .slides .slide-5 {
 height: 480px;
 }
#thumbnail-preview-indicators .slides .slide-1 {
 background-image: url(<?php echo "cdn/store/products/".$product['screen1']."";?>); 
}
#thumbnail-preview-indicators .slides .slide-2 {
 background-image: url(<?php echo "cdn/store/products/".$product['screen2']."";?>);
}
#thumbnail-preview-indicators .slides .slide-3 {
 background-image: url(<?php echo "cdn/store/products/".$product['screen3']."";?>);
}
#thumbnail-preview-indicators .slides .slide-4 {
 background-image: url(<?php echo "cdn/store/products/".$product['screen4']."";?>);
}
#thumbnail-preview-indicators .slides .slide-5 {
 background-image: url(<?php echo "cdn/store/products/".$product['screen5']."";?>);
}
#thumbnail-preview-indicators .carousel-inner .item .carousel-caption {
 top: 20%;
 bottom: inherit;
}
#thumbnail-preview-indicators .carousel-indicators li,
#thumbnail-preview-indicators .carousel-indicators li.active {
 position: relative;
 width: 100px;
 height: 8px; 
}
#thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
 position: absolute;
 top: 0;
 width: 100px;
 display: none;
 opacity: 0;
 left: 50%;
 margin-top: -80px;
 margin-left: -50px;
}
#thumbnail-preview-indicators .carousel-indicators li:hover > .thumbnail,
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail {
 display: block;
 opacity: .8;
}
#thumbnail-preview-indicators .carousel-indicators li.active > .thumbnail:hover{
 opacity: 1;
}
@media screen and (max-width : 480px) { 
 #thumbnail-preview-indicators .carousel-indicators li,
 #thumbnail-preview-indicators .carousel-indicators li.active {
 width: 50px;
 height: 8px;
 position: relative;
 }
 #thumbnail-preview-indicators .carousel-indicators li > .thumbnail {
 width: 50px;
 left: 50%;
 margin-top: -50px;
 margin-left: -25px;
 }
}
</style>
  <body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav">
 <div class="container">
 <div class="navbar-header">
 <a class="navbar-toggle"> 
 <span class="sr-only">Открыть меню</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </a>
 <a class="navbar-brand" href="http://deck8.ru/">Deck 8</a>
 </div>
 <div id="slidemenu">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="search" placeholder="Найти" class="form-control">
</div>
<button type="submit" class="btn btn-default">Поиск</button>
</form>
 <ul class="nav navbar-nav">
 <li class="active"><a href="http://deck8.ru/">Магазин</a></li>
 <li><a href="http://bootstraptema.ru/stuff/templates_bootstrap/1">Сообщество</a></li>
 <li><a href="http://bootstraptema.ru/stuff/plugins_bootstrap/2">О Deck 8</a></li>
 <li><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/3">Поддержка</a></li>
 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ещё <b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="http://bootstraptema.ru/stuff/0-0-0-0-1">Скачать</a></li>
 <li><a href="http://bootstraptema.ru/index/best_for_bootstrap/0-4">Топ 100</a></li>
 <li><a href="http://bootstraptema.ru/index/feedback/0-3">Связь</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </div>
<div style="padding-top: 80px; padding-left: 280px;"><p>Экшен / <?=$product['title'] ?></p></div>
<div style="padding-left: 280px;"><h3><?=$product['title'] ?></h3></div>
<!--Right Block-->
 <div class = "col-md-2 col-md-push-8">
 <div style="padding-left: 50px; padding-top: 10px;"><img class="group list-group-image" src="cdn/store/products/<?=$product['poster'] ?>" alt="1"></div>
 <div class="container" style="color: #808080; padding-left: 50px; padding-top: 10px; width: 520px; height: 230px;"><?=$product['description'] ?></div>
 <div style="padding-left: 50px; padding-top: 6px; width: 545px;">Метки для этого продукта:</div>
 <div style="padding-left: 50px; padding-top: 5px; width: 545px;"><?php foreach($tags as $tag): ?><label style="color: #FFFFFF; background-color: #696969; padding-left: 5px; padding-right: 5px; border-radius: 5px;"><?=$tag['tag'] ?></label>&nbsp;<?php endforeach; ?></div>
 <div style="padding-left: 50px; padding-top: 5px; back">Дата выхода: <?=$product['release_date'] ?></div>
 <div style="padding-left: 50px; padding-top: 5px; back">Разработчик: <?=$product['deplovers'] ?></div>
 <div style="padding-left: 50px; padding-top: 5px; back">Издатель: <?=$product['publisher'] ?></div>
 <div style="padding-left: 50px; padding-top: 5px; back"><button class="btn btn-default" style="width: 300px;">Посмотреть историю обновлений</button></div>
 <div style="padding-left: 50px; padding-top: 5px; back"><button class="btn btn-default" style="width: 300px;">Посмотреть обсуждения</button></div>
 <div style="padding-left: 50px; padding-top: 5px; back"><button class="btn btn-default" style="width: 300px;">Найти группы сообщества</button></div>
</div>
<!--Right Block end-->
<!--Slider-->
 <div name="slider" style="padding-top: 10px; padding-left: 280px; padding-right: 520px;">
 <div id="thumbnail-preview-indicators" class="carousel slide" interval="10000" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#thumbnail-preview-indicators" data-slide-to="0" class="active">
 <div class="thumbnail">
 <img class="img-responsive" src="<?php echo "cdn/store/products/".$product['screen1']."";?>">
 </div>
 </li>
 <li data-target="#thumbnail-preview-indicators" data-slide-to="1">
 <div class="thumbnail">
 <img class="img-responsive" src="<?php echo "cdn/store/products/".$product['screen2']."";?>">
 </div>
 </li>
 <li data-target="#thumbnail-preview-indicators" data-slide-to="2">
 <div class="thumbnail">
 <img src="<?php echo "cdn/store/products/".$product['screen3']."";?>"> <!--1522x481-->
 </div>
 </li>
 <li data-target="#thumbnail-preview-indicators" data-slide-to="3">
 <div class="thumbnail">
 <img src="<?php echo "cdn/store/products/".$product['screen4']."";?>"> <!--1522x481-->
 </div>
 </li>
 <li data-target="#thumbnail-preview-indicators" data-slide-to="4">
 <div class="thumbnail">
 <img src="<?php echo "cdn/store/products/".$product['screen5']."";?>"> <!--1522x481-->
 </div>
 </li>
 </ol>
 <div class="carousel-inner">
 <!--Slide-->
 <div class="item slides active">
 <div class="slide-1"></div>
 <div class="container">
 <div class="carousel-caption">
 </div>
 </div>
 </div>
 <!--Slide end-->
 <div class="item slides">
 <div class="slide-2"></div>
 <div class="container">
 <div class="carousel-caption">
 </div>
 </div>
 </div>
 <div class="item slides">
 <div class="slide-3"></div>
 <div class="container">
 <div class="carousel-caption">
 </div>
 </div>
 </div>
 <div class="item slides">
 <div class="slide-4"></div>
 <div class="container">
 <div class="carousel-caption">
 </div>
 </div>
 </div>
 <div class="item slides">
 <div class="slide-5"></div>
 <div class="container">
 <div class="carousel-caption">
 </div>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 <a class="right carousel-control" href="#thumbnail-preview-indicators" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 </div>
 </div>
 <!--Slider end-->
    <!--Content-->
    <div name="product-buy-block" style="padding-left: 280px; padding-top: 20px;">
    <div style="border: 2px solid #696969; float: left;">
    <h3 style="float: left; padding-left: 40px; padding-top: 10px;">Купить <?=$product['title'] ?></h3>
    <p style="padding-left: 760px; padding-right: 27px; padding-top: 10px;"><button type="button" class="btn btn-success" data-loading-text="Загрузка...">В корзину</button></p>
    <p style="padding-left: 757px; padding-right: 23px;"><label style="width:97px; color: #FFFFFF; background-color: #696969; padding-left: 5px; padding-right: 5px; border-radius: 5px;">Цена: <?=$product['price'] ?> ₽</label></p>
        </div>
        </div>
        <div style="float:left; width: 880px;" name="product-info-block">
        <h4 style="width: 130px; padding-top: 20px;" class="group inner list-group-item-heading">Об этой игре</h4>
        <div style="float:left; width: 880px;" name="product-info2-block">
        <p><?=$product['description_full'] ?></p>
        </div>
        </div>
<!--Content end-->
<?php endforeach; ?>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="engine/js/bootstrap.min.js"></script>
    <script src="engine/snippets/vam.md.js"></script>
    <script src="engine/snippets/slidemenu.js"></script>
  </body>
</html>

Подскажите пожалуйста где мой косяк и как избежать подобного в будущем т.к. планирую добавить еще несколько блоков с выводом ниже.

READ ALSO
Определение города посетителя js
HTML

Определение города посетителя js

Использую сервис для определения гео http://apisypexgeo

 220
Вызов action у form из Requst
HTML

Вызов action у form из Requst

Добрый день!

 230
Чекбокс/батон с изображением из БД передающие переменную
HTML

Чекбокс/батон с изображением из БД передающие переменную

Всем привет, дано три страницы php, задача в следующем на второй страницы словить переменную из первой страницы выполнить поиск по БД получить...

 189
Взятие элемента из таблицы
HTML

Взятие элемента из таблицы

Как взять значение из ячейки и подставить его в ссылку? Есть таблица

 225