css - stacking DIVs one below another vertically -

html:

<div id="container">     <div id="topdiv" />     <div id="maindiv" /> </div>

css:

#topdiv {        height: 25%;        width:100%;       border:dashed; }  #maindiv {       height: 75%;         width:100%;          border:solid; }

unable stack divs (topdiv, maindiv) vertically 1 below other. doing wrong?

what doing wrong basic thing, self closing div element tags, renders incorrectly.

correct syntax

<div id="container">     <div id="topdiv"></div>     <div id="maindiv"></div> </div>

you cannot self close div tags

enter image description here

click here validate html documents

Roma