make posistion elements stick to each other - html

Question

I want position elements to flow under each other when resizing the window, I have a header that height increases as window get smaller.
have a submenu displayed when click on on element on the menu, the menu will appear under the main menu and it should stick to the bottom of the header when resizing the window.
I try to the problem by detecting screen size by js and change the top dynamically, but it suddenly while resizing the window, the top is different from what it should be and it becomes at the center of the window...
I make simple example here
http://jsfiddle.net/xv8hS/1/
the auto hight is not working on this version! I want the green bar to become under the items bar when resizing the window closer and larger.

Answer 1

This is not a positioning, but a floating issue. Use an empty <div> with clear:both in your header (demonstration):
<div id="container">
<div id="header">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<div class="clearfix"></div>
</div>
<div id="submenu"></div>
</div>
#container{
position:relative;
min-height:300px;
height:auto;
width:100%;
}
#header{
width:100%;
min-height:80px;
height:auto;
background-color:red;
posistion:absolute;
top:0;
right:0;
}
#header ul{
width:100%;
min-height:20px;
height:auto;
}
#header ul li{
min-height:50px;
height:auto;
display:inline-block;
float:left;
width:200px;
}
#submenu{
width:70%;
min-height:20px;
height:auto;
height:5%;
background-color:green;
posistion:absolute;
top:10%;
right:0;
}
.clearfix{clear:both;}
See also:
CSS 2.1: 9.5 Floats
All About Floats