How to move div vertically down using CSS

Question

I am new to CSS and I would like to move the div section down (see image below):

How to make div.title "float down" so that it neatly settles in the lower left corner of the main div (box with aquarem).

I tried vertical alignment, but it does not work.

Answer 1

Give margin-top

div{margin-top:10px;} 

Answer 2

You can make your blue div position: relative , and then give div.title position:absolute; and bottom: 0px

Here is a working demo. http://jsfiddle.net/gLaG6/

Answer 3

I don't see the mention of flexbox here, so I will illustrate:

HTML

  <div class="wrapper"> <div class="main">top</div> <div class="footer">bottom</div> </div> 

CSS

  .wrapper { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; } .footer { flex: 0; } 

Answer 4

The standard width space for a standard 16 pixel font is 4 pixels.

Source: http://jkorpela.fi/styles/spaces.html