Currently dealing with a challenge regarding vertical alignment. I have two divs, one with dynamic height based on the browser size and the other with fixed height positioned at the bottom of the page. The second div also requires some margin.
You can see an example of what I'm aiming for here.
I attempted the following code:
<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>
<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>
</body>
</html>
However, I am unable to add margin to the second div. Any suggestions?