Футер прижимается к верхку страницы после выполнения цикла?

Question

[Ivan Ivanovich]

Здравствуйте. Есть код:

<div class="block-1">
<?php
$per_page = 10;
$page = 1;
if (isset($_GET['page'])) {
  $page = (int) $_GET['page'];
}

$total_count_q = mysqli_query($connection, "SELECT COUNT(`id`) AS `total_count` FROM `films`");
$total_count = mysqli_fetch_assoc($total_count_q);
$total_count = $total_count['total_count'];
$total_pages = ceil($total_count / $per_page);

if ($page <= 1 || $page > $total_pages) {
  $page = 1;
}
$offset = 0;
if ($page != 0) {
  $offset = $per_page * $page;
}

$offset = ($per_page * $page) - $per_page;
$articles = mysqli_query($connection, "SELECT * FROM `films` ORDER BY `id` DESC LIMIT $offset,$per_page");
$articles_exist = true;
if (mysqli_num_rows($articles) <= 0) {
  echo "Фильмов не найдено.";
  $articles_exist = false;
}
while ($art = mysqli_fetch_assoc($articles)) {
  ?>
  <div class="film-card">
      <a class="film-card__handler" href="view.php?id=<?php echo $art['id']; ?>" target="_blank">
        <div class="film-card__poster">
          <img class="film-card__img" src="<?php echo $art['img']; ?>" alt="<?php echo $art['name']; ?>">
        </div>
        <div class="film-card__triangle triangle">
          <span class="triangle__line"></span>
          <span class="triangle__line"></span>
          <span class="triangle__line"></span>
        </div>
        <div class="film-card__title"><?php echo $art['name']; ?></div>
        <div class="film-card__year"><?php echo $art['year']; ?></div>
      </a>
    </div>
    <?php
  }
   ?>
</div> <!-- block-1 end -->


<?php require "../src/php/footer.php"; ?>

У block-1

width 80% и float right

Код футера

<footer>
   <div>Текст</div>
</footer>

Код идущий перед циклом нужен для пагинатора.

Получается так, что футер находиться сверху страницы перед циклом.

Как это исправить?

Comments

[Павел Лебедев]

Поделись содержимым стилей

[Konata Izumi]

Для начала отделить логику от представления.

[Ivan Ivanovich]

Павел Лебедев, У film-card

display: inline-block;
text-align: center;
width: 234px;
position: relative;
margin-left: 61px;
margin-bottom: 29px;

[Павел Лебедев]

Ivan Ivanovich, футер прилипает из-за float: right
Меняй тег на CSS и ищи правды там
Быть может тебе совсем не нужно это выравнивание?

Answer 1

[Павел Лебедев]

.block-1 {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        float: right;
    }

Ставь ширину 100%, а ширину блока меняй отступами

Comments

[Ivan Ivanovich]

Павел Лебедев Спасибо большое!