I'm new to CSS and I'd like to move a div section down (pls see attached image below):
How do I make the div.title "float down" so that it neatly settles to the bottom left corner of the main div (aqua coloured box).
I've tried vertical-align but it doesnt work.
This question is related to
asp.net
css
visual-studio-2010
class
html
I don't see any mention of flexbox in 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;
}
Give margin-top
div{margin-top:10px;}
A standard width space for a standard 16px font is 4px.
if div.title is a div then put this:
left: 0;
bottom: 0;
Try this configuration:
position to absolute
width to 100%
height to 100px
bottom to 10
background-color: blue
This can help actually move the div to the bottom. Just modify accordingly.
You could make your blue div
position: relative
and then give the div.title
position:absolute;
and bottom: 0px
Here is a working demo.. http://jsfiddle.net/gLaG6/
Source: Stackoverflow.com