How to position div's and button correctly - css

Question

With the help of the nice people here I got a reasonably decent mock-up: http://jsfiddle.net/CecilWesterhof/4kLwK/2
In the middle there is a main document and besides this there is a comment section.
It looks reasonable, but there are two problems with it.
When the document becomes less high, the position of the comments is not really correct. It should be top, middle and bottom. But currently (in FireFox, which is the most important) when the document height is lowered the middle section gets into the bottom section.
What should I change in this code?
The other problem is the next button. I would like to have it on the right, but I did not get this to work.
I tried:
button.next {
background: #84a0C4;
border-radius: 10px;
clear: both;
color: #FFFFFF;
float: right;
font-size: 200%;
overflow: hidden;
}
But that places the button at the right, but also makes the comment section bigger and gives you a scrollbar when you do not need one.
EDIT
For the button problem I found a hack. Using the above style and adding a few breaks like:
<button class="next" id="next">Next</button>
<br/><br/><br/>
solves the button problem. Not really neat, so if there is a better way …
To see the problem with the float without the hack:
How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png
About the alignment problem, this picture displays it:
wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png
Questioning is merged into ‘Always check for a reference’ instead of being halfway between ‘Be short …’ and ‘Always check …’.

Answer 1

You have to pick minimum min-height for your comment div, as you will always have an issue with that.
Also I've found some weird positioning logic in your css file including tranformations of Y scale... No idea why you need that. It'll probably cause many troubles in IE browsers.
Anyway, here is the fiddle -> http://jsfiddle.net/4kLwK/7/
and in a summary my modifications of the CSS file:
added:
#comment
{ position:relative;
min-height:250px;
height:100%;
}
modified:
.middle {
position: absolute;
border:1px solid red;
top: 40%;
}
.bottom {
position: absolute;
bottom: 0px;
}
Edit:
With one little addition it did the trick.
.bottom {
position: absolute;
bottom: 0px;
width: 99%; /*
In this way the button stays right.