Min-height on class doesn't work - html

Question

I'm creating a website, but have a little problem, that I don't know how to solve.
<div id="middle">
<div id="clock">Here shows JS clock</div><br>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
TITLE TEXT
</div>
<div class="clearboth"></div>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
<p>SOME TEXT</p>
</div>
And CSS
.element{
background-color:#fff;
min-heigth:100px;
}
#middle{
font-family:'Roboto', monospace;
padding-left:5px;
padding-right:5px;
min-height:1000px;
width:1000px;
background-color:#ffffff;
margin:auto;
}
#middle > h1,h2,h3{
font-family: 'VT323', monospace;
font-size:34px;
margin-left:20px;
}
.clearboth{
clear:both;
}
#middle p{
text-indent: 40px;
font-size:18px;
}
But it min-height doesn't work - next element starts right after previous one.

Answer 1

From what I can tell, it doesn't seem like the height of the items is changing (i.e. with percentages, etc). This means that the height remains static, so there is no reason for the min-height to activate, in a sense. Try doing that and fixing the other errors that the others have pointed out. Hope this helps.

Answer 2

It seems to me that what you want is to have space between your elements, assuming that the code you write is corrected ("height" instead of "heigth" and the div#middle is closed), try adding to your element some margin at bottom.
.element {
background-color: #fff;
min-height: 100px;
margin-bottom: 30px; /* Add this line to separate each element for 30px */
}
If you don't need the margin on the last element just add a new selector to target the last .element in your code.
.element:last-of-type {
margin-botton: 0;
}

Answer 3

Try this, min-height spelled wrong and your #middle div isn't closed.
.element{
background-color:#fff;
min-height:100px;
}
#middle{
font-family:'Roboto', monospace;
padding-left:5px;
padding-right:5px;
min-height:1000px;
width:1000px;
background-color:#ffffff;
margin:auto;
}
#middle > h1,h2,h3{
font-family: 'VT323', monospace;
font-size:34px;
margin-left:20px;
}
.clearboth{
clear:both;
}
#middle p{
text-indent: 40px;
font-size:18px;
}
<div id="middle">
<div id="clock">Here shows JS clock</div><br>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
TITLE TEXT
</div>
<div class="clearboth"></div>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
<p>SOME TEXT</p>
</div>
</div>