Fixed footer multiline text

uaprom-summer-2015 · Jul 22, 2015 · 33f4e48 · 33f4e48
1 parent 66c8bc5
commit 33f4e48
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/project/static/css/base.css b/project/static/css/base.css
@@ -0,0 +1,22 @@
+.container-footer {
+    height: 100%;
+    display: table;
+    width: 100%;
+}
+
+.footer-el {
+    display: table-cell;
+    width: 33%;
+    vertical-align: middle;
+}
+
+.footer-left {
+    text-align: left;
+}
+
+.footer-center {
+    text-align: center;
+}
+.footer-right {
+    text-align: right;
+}
diff --git a/project/templates/base.html b/project/templates/base.html
@@ -5,6 +5,7 @@
     {% block meta %}{% endblock%}
     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/feed.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
     <link rel="stylesheet" href="http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css">
     <title>{% block title %}{% endblock %}</title>
@@ -53,13 +54,15 @@
 
     {% block footer %}
         <footer class="footer">
-            <div class="container">
-                <div class="text-center text-muted">
-                    <span class="pull-left">Копировано правильно</span>
-                    <span class="">Мы очень социабельны</span>
-                    <span class="pull-right">Телефоны модные</span>
+                <div class="container container-footer">
+                    <span class="footer-el footer-left">Копировано правильно</span>
+                    <span class="footer-el footer-center">Мы очень социабельны</span>
+                    <span class="footer-el footer-right">
+                        Телефоны модныеfdsfs
+                        <br>
+                        fdsfs<br>
+                    </span>
                 </div>
-            </div>
         </footer>
     {% endblock %}
 </body>