css - height of <div> tag -

i have 2 divs in page: <div id="firtdiv" style="top:100px; left:200px; height:unknown"></div> <div style="top:unknow; height:200px" id="seconddiv"></div>

i set firstdiv's height auto because put datalist don't know it's height. , secondiv's top property change according fistdiv's height. second div bottom of firstdiv.

how can do?

i suggest put 2 div's in div (which set absolute). 'coz when set both absolute, there's no way push each other. here's example:

<div id="wrapper">     <div id="content">         content...     </div>      <div id="bottom">         botom..     </div> </div> 

for css:

#wrapper {     position:absolute;     top: 110px;     left: -400px;     width:800px; }  #bottom {     border-top: 2px dotted #2259ff;     font-family: ebrima;     padding-top: 5px;     height: 200px;     margin-left: 50%;     background-color:green; } #content {     padding: 0px;     margin-left: 50%;     min-height:400px;     _height:400px;     background-color:yellow; } 

as can see, put 2 div's in parent div (wrapper). parent div set absolute how want 2 div's positioned. 2 div's not positioned absolute first div push second div when content grows. also, if want retain minimum height of first div, put min-height:400px, careful 'coz there's problem min-height in internet explorer, can make work in ie put _height:400px; coz ie considers height min-height, ie consider _height (with underscore) not other browser, wont have effect other browsers.