diff --git a/app/templates/forum.tpl b/app/templates/forum.tpl
index f545d0ed..c1719726 100644
--- a/app/templates/forum.tpl
+++ b/app/templates/forum.tpl
@@ -56,7 +56,7 @@
     <div class="f-nav-links">
 @yield ('crumbs')
 @if ($p->model->canCreateTopic || $p->model->pagination)
-      <div class="f-nlinks-b clearfix">
+      <div class="f-nlinks-b">
   @yield ('pagination')
   @if ($p->model->canCreateTopic)
         <div class="f-actions-links">
@@ -152,7 +152,7 @@
     </section>
     <div class="f-nav-links">
   @if ($p->model->canCreateTopic || $p->model->pagination || $p->model->canMarkRead)
-      <div class="f-nlinks-a clearfix">
+      <div class="f-nlinks-a">
     @if ($p->model->canCreateTopic || $p->model->canMarkRead)
         <div class="f-actions-links">
       @if ($p->model->canMarkRead)
diff --git a/app/templates/index.tpl b/app/templates/index.tpl
index 59acef6d..290cb4c1 100644
--- a/app/templates/index.tpl
+++ b/app/templates/index.tpl
@@ -19,7 +19,7 @@
     </section>
   @if ($p->linkMarkRead)
     <div class="f-nav-links">
-      <div class="f-nlinks clearfix">
+      <div class="f-nlinks">
         <div class="f-actions-links">
           <a class="f-btn f-btn-markread" title="{!! __('Mark all as read') !!}" href="{!! $p->linkMarkRead !!}">{!! __('All is read') !!}</a>
         </div>
diff --git a/app/templates/layouts/main.tpl b/app/templates/layouts/main.tpl
index 835c2d5d..d1b4e183 100644
--- a/app/templates/layouts/main.tpl
+++ b/app/templates/layouts/main.tpl
@@ -43,13 +43,10 @@
   @include ('layouts/iswev')
 @endif
 @yield ('content')
-    <footer class="f-footer clearfix">
+    <footer class="f-footer">
       <h2>{!! __('Board footer') !!}</h2>
-      <div class="left">
-      </div>
-      <div class="right">
-        <p class="poweredby">{!! __('Powered by') !!}</p>
-      </div>
+      <div></div>
+      <div><p class="poweredby">{!! __('Powered by') !!}</p></div>
     </footer>
 <!-- debuginfo -->
   </div>
diff --git a/app/templates/layouts/stats.tpl b/app/templates/layouts/stats.tpl
index 32883c70..bee80f1a 100644
--- a/app/templates/layouts/stats.tpl
+++ b/app/templates/layouts/stats.tpl
@@ -1,41 +1,39 @@
     <section class="f-stats">
       <h2>{!! __('Stats info') !!}</h2>
-      <div class="clearfix">
 @if ($p->stats)
-        <dl class="f-stboard">
-          <dt>{!! __('Board stats') !!}</dt>
-          <dd>{!! __('No of users') !!} <strong>{!! num($p->stats->userTotal) !!}</strong></dd>
-          <dd>{!! __('No of topics') !!} <strong>{!! num($p->stats->topicTotal) !!}</strong></dd>
-          <dd>{!! __('No of posts') !!} <strong>{!! num($p->stats->postTotal) !!}</strong></dd>
-        </dl>
+      <dl class="f-stboard">
+        <dt>{!! __('Board stats') !!}</dt>
+        <dd>{!! __('No of users') !!} <strong>{!! num($p->stats->userTotal) !!}</strong></dd>
+        <dd>{!! __('No of topics') !!} <strong>{!! num($p->stats->topicTotal) !!}</strong></dd>
+        <dd>{!! __('No of posts') !!} <strong>{!! num($p->stats->postTotal) !!}</strong></dd>
+      </dl>
 @endif
-        <dl class="f-stusers">
-          <dt>{!! __('User info') !!}</dt>
+      <dl class="f-stusers">
+        <dt>{!! __('User info') !!}</dt>
 @if ($p->stats)
   @if (is_string($p->stats->userLast))
-          <dd>{!! __('Newest user')  !!} {{ $p->stats->userLast }}</dd>
+        <dd>{!! __('Newest user')  !!} {{ $p->stats->userLast }}</dd>
   @else
-          <dd>{!! __('Newest user')  !!} <a href="{!! $p->stats->userLast[0] !!}">{{ $p->stats->userLast[1] }}</a></dd>
+        <dd>{!! __('Newest user')  !!} <a href="{!! $p->stats->userLast[0] !!}">{{ $p->stats->userLast[1] }}</a></dd>
   @endif
 @endif
 @if ($p->online)
-          <dd>{!! __('Visitors online', num($p->online->numUsers), num($p->online->numGuests)) !!}</dd>
+        <dd>{!! __('Visitors online', num($p->online->numUsers), num($p->online->numGuests)) !!}</dd>
 @endif
 @if ($p->stats)
-          <dd>{!! __('Most online', num($p->online->maxNum), dt($p->online->maxTime)) !!}</dd>
+        <dd>{!! __('Most online', num($p->online->maxNum), dt($p->online->maxTime)) !!}</dd>
 @endif
-        </dl>
+      </dl>
 @if ($p->online && $p->online->info)
-        <dl class="f-inline f-onlinelist"><!-- inline -->
-          <dt>{!! __('Online users') !!}</dt>
+      <dl class="f-inline f-onlinelist"><!-- inline -->
+        <dt>{!! __('Online users') !!}</dt>
   @foreach ($p->online->info as $cur)
     @if (is_string($cur))
-          <dd>{{ $cur }}</dd>
+        <dd>{{ $cur }}</dd>
     @else
-          <dd><a href="{!! $cur[0] !!}">{{ $cur[1] }}</a></dd>
+        <dd><a href="{!! $cur[0] !!}">{{ $cur[1] }}</a></dd>
     @endif
   @endforeach
-        </dl><!-- endinline -->
+      </dl><!-- endinline -->
 @endif
-      </div>
     </section>
diff --git a/app/templates/topic.tpl b/app/templates/topic.tpl
index 479f6adf..189deb73 100644
--- a/app/templates/topic.tpl
+++ b/app/templates/topic.tpl
@@ -47,7 +47,7 @@
     <div class="f-nav-links">
 @yield ('crumbs')
 @if ($p->model->canReply || $p->model->closed || $p->model->pagination)
-      <div class="f-nlinks-b clearfix">
+      <div class="f-nlinks-b">
   @yield ('pagination')
   @yield ('linkpost')
       </div>
@@ -134,7 +134,7 @@
     </section>
     <div class="f-nav-links">
 @if ($p->model->canReply || $p->model->closed || $p->model->pagination)
-      <div class="f-nlinks-a clearfix">
+      <div class="f-nlinks-a">
   @yield ('linkpost')
   @yield ('pagination')
       </div>
diff --git a/app/templates/topic_in_search.tpl b/app/templates/topic_in_search.tpl
index 3ef8c6fc..7a4ecb8f 100644
--- a/app/templates/topic_in_search.tpl
+++ b/app/templates/topic_in_search.tpl
@@ -36,7 +36,7 @@
     <div class="f-nav-links">
 @yield ('crumbs')
 @if ($p->model->pagination)
-      <div class="f-nlinks-b clearfix">
+      <div class="f-nlinks-b">
   @yield ('pagination')
       </div>
 @endif
@@ -96,7 +96,7 @@
     </section>
     <div class="f-nav-links">
 @if ($p->model->pagination)
-      <div class="f-nlinks-a clearfix">
+      <div class="f-nlinks-a">
   @yield ('pagination')
       </div>
 @endif
diff --git a/app/templates/userlist.tpl b/app/templates/userlist.tpl
index fffc8ca6..68c8f74b 100644
--- a/app/templates/userlist.tpl
+++ b/app/templates/userlist.tpl
@@ -36,7 +36,7 @@
     <div class="f-nav-links">
 @yield ('crumbs')
 @if ($p->pagination)
-      <div class="f-nlinks-b clearfix">
+      <div class="f-nlinks-b">
   @yield ('pagination')
       </div>
 @endif
@@ -99,7 +99,7 @@
     </section>
   @if ($p->pagination)
     <div class="f-nav-links">
-      <div class="f-nlinks clearfix">
+      <div class="f-nlinks">
     @yield ('pagination')
       </div>
     </div>
diff --git a/public/style/ForkBB/style.css b/public/style/ForkBB/style.css
index 029e0b4d..cd186c85 100644
--- a/public/style/ForkBB/style.css
+++ b/public/style/ForkBB/style.css
@@ -586,6 +586,9 @@ select {
   border-bottom: 0.0625rem solid #AA7939;
   border-top: 0.0625rem solid #AA7939;
   background-color: #F8F4E3;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .f-footer > h2 {
@@ -668,37 +671,42 @@ select {
   border: 0;
 }
 
+.f-nav-links .f-actions-links,
+.f-nav-links .f-pages {
+  padding: 0 0.625rem;
+}
+
+.f-nlinks,
+.f-nlinks-a,
+.f-nlinks-b {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .f-nlinks-b {
   margin-top: 0.625rem;
   border-top: 0.0625rem dotted #AA7939;
 }
 
+.f-nlinks-b .f-actions-links,
+.f-nlinks-b .f-pages {
+  padding-top: 0.625rem;
+}
+
 .f-nlinks-a {
   margin-bottom: 0.625rem;
   border-bottom: 0.0625rem dotted #AA7939;
-}
-
-.f-actions-links {
-  float: right;
-}
-
-.f-pages {
-  float: left;
+  flex-wrap: wrap-reverse;
 }
 
 .f-nlinks-a .f-actions-links,
 .f-nlinks-a .f-pages {
-  padding: 0 0.625rem 0.625rem 0.625rem;
+  padding-bottom: 0.625rem;
 }
 
-.f-nlinks-b .f-actions-links,
-.f-nlinks-b .f-pages {
-  padding: 0.625rem 0.625rem 0 0.625rem;
-}
-
-.f-nlinks .f-actions-links,
-.f-nlinks .f-pages {
-  padding: 0 0.625rem;
+.f-nav-links .f-actions-links {
+  margin-left: auto;
+  order: 1;
 }
 
 .f-nav-links .f-page {
@@ -962,40 +970,35 @@ select {
 .f-stats {
   border-top: 0.0625rem solid #AA7939;
   font-size: 0.875rem;
-}
-
-.f-stats > h2 {
-  display: none;
-}
-
-.f-stats > div {
   padding: 0.3125rem 0;
 }
 
-.f-stats dl {
-  padding: 0.3125rem 0.625rem;
-}
-
+.f-stats > h2,
 .f-stats dt {
   display: none;
 }
 
+.f-stboard,
+.f-stusers {
+  padding: 0.3125rem;
+}
+
 .f-stboard {
-  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
   border-bottom: 0.0625rem dotted #AA7939;
 }
 
-.f-stboard > dd {
-  display: inline-block;
-}
-
-.f-stboard > dd + dd {
-  margin-left: 0.625rem;
+.f-stboard > dd,
+.f-stusers > dd {
+  padding: 0 0.3125rem;
 }
 
 .f-onlinelist {
-  clear: both;
   border-top: 0.0625rem dotted #AA7939;
+  padding: 0.3125rem 0.625rem;
+  width: 100%
 }
 
 .f-onlinelist > dt {
@@ -1004,22 +1007,20 @@ select {
 }
 
 @media screen and (min-width: 45rem) {
+  .f-stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between
+  }
+
   .f-stboard {
-    text-align: right;
-    float: right;
-    border: 0;
-  }
-
-  .f-stboard > dd {
     display: block;
-  }
-
-  .f-stboard > dd + dd {
-    margin-left: 0;
+    border: 0;
+    text-align: right;
   }
 
   .f-stusers {
-    float: left;
+    order: -1;
   }
 }