Html & Css - Changing the Gravity

Question

I'm building a website where the elements are really only at the bottom. I want my vertical starting place to start at the bottom instead of the top, and I want to do this without taking those elements out of the normal flow of the page (So no absolute positioning) so that the position of one element can depend on the position of the other. How do I do this? Here's a visual explanation of the 'elements at the bottom' thing. https://i.stack.imgur.com/OrPtt.jpg

    <head>
    <style>
        body {
            background: url('Index-Background.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        section {
            margin-left: 2%;
        }
        nav {
            margin-bottom: 6.66%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h1>The Great Composers</h1>
            <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
        </section>
        <nav>
            <ul>
                <li><a href="#0">Gershwin</a></li>
                <li><a href="#0">Debussy</a></li>
            </ul>
        </nav>
    </main>
</body>

could you explain what you mean by "I'm building a website where the elements are really only at the bottom."? — derp, Jun 21 '16 at 04:10
He just wants his website to follow gravity. What he means by that is that the elements should align automatically from bottom to top instead of the normal behaviour which is top to bottom — noa-dev, Jun 21 '16 at 06:30

score 1 · Accepted Answer · answered Jun 21 '16 at 06:18

1

Well, there are some workarounds. You can do something like this,

html, body {
  height: 100%;
}
body {
  display: table;
}
main {
  display: table-cell;
  vertical-align: bottom;
}

See the working example: https://jsfiddle.net/L1w9m3mz/

answered Jun 21 '16 at 06:18

Jerad Rutnam

1,536
1
14
29

score 0 · Answer 2 · 2016-06-21T04:25:21.180

Try to change section and nav orders

<nav>
    <ul>
        <li><a href="#0">Gershwin</a></li>
        <li><a href="#0">Debussy</a></li>
    </ul>
</nav>
<section>
    <h1>The Great Composers</h1>
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
</section>

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Try this

html, body {
      position: relative; 
     ...
   }
html {
     position: relative;  
     ...
   }

Edit: This might help. How can I position my div at the bottom of its container?

edited May 23 '17 at 12:32

Community

1
1

answered Jun 21 '16 at 04:08

anjali

93
1
2
11

But how would that make them be at the bottom? – Oli Jun 21 '16 at 04:09
What is "them" here? – anjali Jun 21 '16 at 04:14
@Oli, please check the edited answer above and let me know. – anjali Jun 21 '16 at 08:46

score 0 · Answer 4 · answered Jun 21 '16 at 04:28

0

Hmm, i'm still not entirely sure what you want to achieve, however if you are trying to make the nav bar horizontal. You'll need to add the following css:

li {
  display: inline-block;
  padding-right:10px;
}

answered Jun 21 '16 at 04:28

derp

2,300
13
20

score 0 · Answer 5 · answered Jun 21 '16 at 04:31

0

How about using position:fixed to set the nav positioning. Here are the what i conclude from the image you attached : JSFiddle

answered Jun 21 '16 at 04:31

Johan Pranata

317
2
9

score 0 · Answer 6 · answered Jun 21 '16 at 06:31

0

use flexbox - all modern browsers support
add .reverse where you want to reverse.

http://caniuse.com/#search=flexbox

.reverse {
     display: flex;
     flex-direction: column-reverse;
  }

answered Jun 21 '16 at 06:31

Html & Css - Changing the Gravity

6 Answers6